PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

side menu

Get Started

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

Compare

play_arrow

Advanced Capabilities

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Add Link to Annotations

The following features are available in:

check

PDF.js Express Viewer

help_outline

PDF.js Express Viewer is a free viewer with limited capabilities compared to PDF.js Express Plus

check

PDF.js Express Plus

help_outline

PDF.js Express Plus is a commercial PDF SDK for viewing, annotating, signing, form filling and more

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

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);
  });
});

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);
  });
});