Select a product

PDF.js Express Free Viewerplay_arrow

Professional PDF.js Viewing - Free

PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

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

Create highlight annotations in PDF.js Express

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

Here is an example of creating highlight annotations, but creating other types of annotations are similar.

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

    docViewer.on('documentLoaded', () => {
      const highlight = new Annotations.TextHighlightAnnotation();
      highlight.PageNumber = 4;
      highlight.X = 405;
      highlight.Y = 165;
      highlight.Width = 275;
      highlight.Height = 25;
      highlight.StrokeColor = new Annotations.Color(255, 255, 0);
      // you might get the quads from text selection, a server calculation, etc
      highlight.Quads = [
        { x1: 644, y1: 178, x2: 682, y2: 178, x3: 682, y3: 168, x4: 644, y4: 168 },
        { x1: 408, y1: 190, x2: 458, y2: 190, x3: 458, y3: 180, x4: 408, y4: 180 }
      ];

      annotManager.addAnnotation(highlight);
      annotManager.drawAnnotations(highlight.PageNumber);
    })
  })
WebViewer(...)
  .then(instance => {
    const { 
      Annotations, 
      annotationManager, 
      documentViewer 
    } = instance.Core;

    documentViewer.addEventListener('documentLoaded', () => {
      const highlight = new Annotations.TextHighlightAnnotation();
      highlight.PageNumber = 4;
      highlight.X = 405;
      highlight.Y = 165;
      highlight.Width = 275;
      highlight.Height = 25;
      highlight.StrokeColor = new Annotations.Color(255, 255, 0);
      // you might get the quads from text selection, a server calculation, etc
      highlight.Quads = [
        { x1: 644, y1: 178, x2: 682, y2: 178, x3: 682, y3: 168, x4: 644, y4: 168 },
        { x1: 408, y1: 190, x2: 458, y2: 190, x3: 458, y3: 180, x4: 408, y4: 180 }
      ];

      annotationManager.addAnnotation(highlight);
      annotationManager.drawAnnotations(highlight.PageNumber);
    })
  })

Other examples

Creating rectangle annotations
To create a rectangle annotation.

Creating stamp annotations
To create a stamp annotation.

Creating free text annotations
To create a free text annotation.

Creating file attachment annotations
To create a file attachment annotation.

Creating custom annotations
To create a customized annotation.