Some test text!

Loading...
Guides
Annotation link

Add Link to Annotations

Use WebViewer UI to Add Links to Annotations

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

WebViewer UI ContextMenu Annotation Link Button

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

WebViewer UI Annotation Link Modal

Programmatically Add Hyperlink to Existing Annotation

To programmatically add a hyperlink to an existing 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();
    const {
      PageNumber,
      X,
      Y,
      Height,
      Width,
    } = originalAnnotation;
    // Copy the properties de-structured above into newLink
    Object.assign(
      newLink,
      {
        PageNumber,
        X,
        Y,
        Height,
        Width,
      },
    );

    /**
     * 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.pdftron.com',
      }),
    );

    originalAnnotation.associateLink([newLink.Id]);
    annotationManager.addAnnotation(newLink);
  });
});

Programmatically Add Intra-Document Link to Existing Annotation

To programmatically add an intra-document link to an existing 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();
    const pageToLinkTo = 2;
    const {
      PageNumber,
      X,
      Y,
      Height,
      Width,
    } = originalAnnotation;
    // Copy the properties de-structured above into newLink
    Object.assign(
      newLink,
      {
        PageNumber,
        X,
        Y,
        Height,
        Width,
      },
    );

    /**
     * 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.GoTo({
        dest: new Actions.GoTo.Dest({
          page: pageToLinkTo,
        }),
      }),
    );

    originalAnnotation.associateLink([newLink.Id]);
    annotationManager.addAnnotation(newLink);
  });
});

Get the answers you need: Support