Some test text!

menu

Create text highlighting annotations using JavaScript

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

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

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

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.