Some test text!

menu
Annotation linkkeyboard_arrow_down

Add Link to Annotations

linkUse 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

linkProgrammatically Add Hyperlink to Existing Annotation

To programmatically add a hyperlink to an existing annotation:

WebViewer(...).then(instance => {
  const { Actions, Annotations, annotManager, docViewer } = instance;

  docViewer.on('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]);
    annotManager.addAnnotation(newLink);
  });
});

linkProgrammatically Add Intra-Document Link to Existing Annotation

To programmatically add an intra-document link to an existing annotation:

WebViewer(...).then(instance => {
  const { Actions, Annotations, annotManager, docViewer } = instance;

  docViewer.on('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]);
    annotManager.addAnnotation(newLink);
  });
});

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our upcoming webinar to learn about how to collaborate on videos frame by frame directly in your browser

Save your seat
close