Link Annotation in React PDF Viewer

22 Sep 20269 minutes to read

This guide explains how to enable, add, customize, and manage link annotations in the Syncfusion React PDF Viewer. You can use link annotations to navigate to another page in the same PDF or open an external URL in the browser. Add links from the annotation toolbar, insert them programmatically, adjust the rectangle bounds, and edit or delete them through the UI or API.

Link annotation overview

To enable Link annotations, inject the following modules into the React PDF Viewer:

This setup enables the annotation toolbar and link annotation behavior.

import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  Print,
  TextSelection,
  Annotation,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
  Inject
} from '@syncfusion/ej2-react-pdfviewer';

export default function App() {
  return (
    <PdfViewerComponent
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      resourceUrl="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2-pdfviewer-lib"
    >
      <Inject services={[
        Toolbar,
        Magnification,
        Navigation,
        Annotation,
        LinkAnnotation,
        BookmarkView,
        ThumbnailView,
        Print,
        TextSelection,
        TextSearch,
        FormFields,
        FormDesigner,
        PageOrganizer
      ]} />
    </PdfViewerComponent>
  );
}

The hyperlinkOpenState property controls how external URLs open when the user clicks a link. NewTab is commonly used for browser navigation.

  1. Click the Add Link button from the annotation toolbar.
  2. Choose whether the link points to a URL or a Page.
  3. Enter the target URL or page number.
  4. Set the properties such as stroke color and stroke thickness.
  5. Click Insert to create the link annotation.

Add Link dialog

The inserted link is displayed as a rectangular annotation region. Users can drag and resize it to position it over the desired target text or area in the PDF.

When clicked, the viewer navigates to the configured page or opens the specified external URL. You can also reposition or resize the annotation after insertion.

Use addAnnotation() to create a link annotation at a specific location.

Add Internal Page Link

function addInternalLink() {
  const viewer = document.getElementById('container').ej2_instances[0];

  viewer.annotation.addAnnotation('Link', {
    offset: { x: 200, y: 480 },
    pageNumber: 1,
    width: 150,
    height: 75,
    destinationPageIndex: 4,
    destinationLocation: { x: 100, y: 200 },
    zoomValue: 4,
    strokeColor: '#1433e3'
  });
}

This adds a link rectangle that navigates to page index 4 and zooms to the specified location when clicked.

function addExternalLink() {
  const viewer = document.getElementById('container').ej2_instances[0];

  viewer.annotation.addAnnotation('Link', {
    offset: { x: 450, y: 480 },
    pageNumber: 1,
    width: 150,
    height: 75,
    url: 'https://www.syncfusion.com',
    strokeColor: '#FF0000'
  });
}

This adds a link rectangle that opens the specified external URL in the browser when clicked.

Link annotations can be customized by specifying properties such as strokeColor, thickness, width, height, and other navigation-related settings when creating or editing the annotation.

<PdfViewerComponent
  id="container"
  documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
  resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
  style={{ height: '650px' }}
  hyperlinkOpenState="NewTab"
>
  <Inject services={[Toolbar, Annotation, LinkAnnotation]} />
</PdfViewerComponent>

After a link annotation is inserted, the user can:

  • Drag the rectangle to a new position
  • Resize the rectangle
  • Modify the stroke color and thickness from the annotation toolbar or property panel
  • Edit the target page or URL from the annotation dialog if supported by the configured UI

Resize and edit link annotation

This allows the link to be visually aligned with the PDF content without changing the document itself.

Use editAnnotation() to update an existing link annotation.

function editLinkAnnotation() {
  const viewer = document.getElementById('container').ej2_instances[0];

  for (let annot of viewer.annotationCollection) {
    if (annot.subject === 'Link') {
      annot.strokeColor = '#1fcbd4';
      annot.thickness = 2;
      annot.bounds = { left: 100, top: 100, width: 100, height: 100 };
      annot.url = 'https://www.google.com';
      annot.destinationPageIndex = 3;
      annot.destinationLocation = { x: 300, y: 300 };
      annot.zoomValue = 1;
      viewer.annotation.editAnnotation(annot);
      break;
    }
  }
}

The PDF Viewer supports deleting link annotations through both the UI and API.

Delete link annotation

function deleteAllAnnotations() {
  const viewer = document.getElementById('container').ej2_instances[0];
  viewer.deleteAnnotations();
}

Delete by annotation id

function deleteLinkById() {
  const viewer = document.getElementById('container').ej2_instances[0];

  if (viewer.annotationCollection.length > 0) {
    viewer.annotation.deleteAnnotationById(viewer.annotationCollection[0].annotationId);
  }
}

You can set link properties when creating the annotation directly by passing the required fields in the addAnnotation('Link', ...) call.

function addMultipleLinks() {
  const viewer = document.getElementById('container').ej2_instances[0];

  viewer.annotation.addAnnotation('Link', {
    offset: { x: 100, y: 150 },
    pageNumber: 1,
    width: 180,
    height: 60,
    url: 'https://www.syncfusion.com',
    strokeColor: '#ff0000'
  });

  viewer.annotation.addAnnotation('Link', {
    offset: { x: 320, y: 180 },
    pageNumber: 1,
    width: 150,
    height: 60,
    destinationPageIndex: 2,
    destinationLocation: { x: 100, y: 200 },
    zoomValue: 2,
    strokeColor: '#1433e3'
  });
}

The PDF viewer raises annotation life cycle events that can be used to monitor when link annotations are added, modified, selected, or removed. For the complete event list and event details, see Annotation Events.

Export and Import

The PDF Viewer supports exporting and importing annotations, including link annotations, so you can save the link data and restore it later. For more information, see Export and Import Annotation.

See Also