Add Link to PDF Annotations

You can make annotations clickable and link to a page in the same document or an external URL. This is done by grouping a link annotation with the desired annotation. This can be useful to create links to other content through a visual annotation markup as opposed to plain text. For example, you can leave a stamp annotation of a picture taken somewhere in the world and attach a geolocation URL to it.

By default, the ContextMenu of an annotation has an option for annotation links:

Which, upon being clicked, will pop-up a modal for adding a hyperlink, or intra-document link, to an annotation:

To programmatically add a hyperlink to an existing annotation, we must first create a link annotation and attach a URI action to it, which is triggered when the existing annotation is clicked. Finally, the link annotation is grouped with the desired annotation.

WebViewer(...).then(instance => {
  const { Actions, Annotations, annotationManager, documentViewer } = instance.Core;

  documentViewer.addEventListener('documentLoaded', () => {
    /**
     * Assumes an annotation has been created, with the variable name "originalAnnotation"
     */
    const newLink = new Annotations.Link();
    newLink.PageNumber = originalAnnotation.PageNumber;
    newLink.X = originalAnnotation.X;
    newLink.Y = originalAnnotation.Y;
    newLink.Width = originalAnnotation.Width;
    newLink.Height = originalAnnotation.Height;

    /**
     * Optional: Add styling to link to indicate to user the annotation has a
     * link associated with it
     */
    newLink.StrokeColor = new Annotations.Color(0, 165, 228);
    newLink.StrokeStyle = 'underline';
    newLink.StrokeThickness = 2;

    newLink.addAction(
      'U',
      new Actions.URI({
        uri: 'https://www.apryse.com',
      }),
    );

    annotationManager.addAnnotation(newLink);
    annotationManager.groupAnnotations(originalAnnotation, [newLink]);
    // Re-render annotations (requires major redraw)
    annotationManager.drawAnnotationsFromList(newLink);
  });
});

Similar to the example above, a link annotation is used to trigger an action when the annotation is clicked. However, in this case, a GoTo action is used instead to go to a certain page in the document.

WebViewer(...).then(instance => {
  const { Actions, Annotations, annotationManager, documentViewer } = instance.Core;

  documentViewer.addEventListener('documentLoaded', () => {
    /**
     * Assumes an annotation has been created, with the variable name "originalAnnotation"
     */
    const newLink = new Annotations.Link();
    newLink.PageNumber = originalAnnotation.PageNumber;
    newLink.X = originalAnnotation.X;
    newLink.Y = originalAnnotation.Y;
    newLink.Width = originalAnnotation.Width;
    newLink.Height = originalAnnotation.Height;

    /**
     * Optional: Add styling to link to indicate to user the annotation has a
     * link associated with it
     */
    newLink.StrokeColor = new Annotations.Color(0, 165, 228);
    newLink.StrokeStyle = 'underline';
    newLink.StrokeThickness = 2;

    const pageToLinkTo = 2;

    newLink.addAction(
      'U',
      new Actions.GoTo({
        dest: new Actions.GoTo.Dest({
          page: pageToLinkTo,
        }),
      }),
    );

    annotationManager.addAnnotation(newLink);
    annotationManager.groupAnnotations(originalAnnotation, [newLink]);
    // Re-render annotations (requires major redraw)
    annotationManager.drawAnnotationsFromList(newLink);
  });
});

Check out how you can group annotations or perhaps create your own custom annotation !