PDF annotation actions support

A PDF action is similar to a web hyperlink, but it’s much more flexible. Nutrient Web SDK implements common actions as defined in Adobe’s PDF Reference (page 417ff).

GoToAction

A GoTo action can define a different pageIndex in the same document. Clicking it updates the scroll position to make the page visible, but it doesn’t update the zoom level.

URIAction

A URI action contains a URI. When executing this annotation, Nutrient uses window.open to create a new browser tab, which also clears the opener as a security measurement to avoid allowing the target page to have access to your PDF state:

let newWindow = window.open(action.uri, "_blank");
newWindow.opener = null;

var newWindow = window.open(action.uri, "_blank");
newWindow.opener = null;

JavaScriptAction

This is a PDF action for running arbitrary JavaScript. Actions are executed on a click. WidgetAnnotation and form fields can also define an additionalActions field, which is a dictionary of event name and action pairs. For more information about the additional actions of WidgetAnnotations and FormFields, refer to the API documentation.

You can learn more about the security problems when using _blank in this article from JitBit(opens in a new tab).

Refer to an individual browser’s documentation for a list of supported URI protocols. The most used protocols (http, https, and mailto) are supported in all major browsers.

Here’s an example showing how to run JavaScript code when a WidgetAnnotation is focused. This is done using the additionalActions field:

const widget = new NutrientViewer.Annotations.WidgetAnnotation({
  id: NutrientViewer.generateInstantId(),
  pageIndex: 0,
  formFieldName: "MyFormField",
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 100,
    top: 75,
    width: 200,
    height: 80
  }),
  additionalActions: {
    onFocus: new NutrientViewer.Actions.JavaScriptAction({
      script: "alert('onFocus')"
    })
  }
});

const formField = new NutrientViewer.FormFields.TextFormField({
  name: "MyFormField",
  annotationIds: new NutrientViewer.Immutable.List([widget.id]),
  value: "Text shown in the form field"
});

instance.create([widget, formField]);

NamedAction

A named action executes a predefined action. The following standard named actions are supported:

• prevPage — Go to the previous page.
• nextPage — Go to the next page.
• firstPage — Go to the first page.
• lastPage — Go to the last page.

A number of non-standard named actions are also supported:

• fullScreen — Enter fullscreen mode.
• zoomIn — Zoom in the document.
• zoomOut — Zoom out the document.
• saveAs — Download the document (if backend permissions allow it).
• search — Show the SDK search user interface (UI).
• outline — Show the SDK outline sidebar.
• print — Print the document (if permissions allow it).

Here’s an example of creating a link annotation with a NamedAction that navigates to the next page when the link is clicked:

const linkAnnotation = new NutrientViewer.Annotations.LinkAnnotation({
  id: NutrientViewer.generateInstantId(),
  pageIndex: 0,
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 100,
    top: 100,
    width: 200,
    height: 50
  }),
  action: new NutrientViewer.Actions.NamedAction({
    action: "nextPage"
  })
});