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

Advanced Search

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

The textSearchInit API allows for more advanced search functionality, since it gives you the location and contents of all search results.

With these search results, you can do things such as add annotations to each search result. The properties of search search result are documented here

Add a highlight annotation to each search result

This example searches the PDF and adds a highlight annotation to each result.

This can be altered to add other kinds of annotations, such as Rectangles, Underlines, etc.

WebViewer(
  { ...options },
  document.getElementById('viewer')
).then(instance => {

  const { docViewer, CoreControls, annotManager, Annotations } = instance;

  docViewer.on('documentLoaded', () => {

    // Set search modes. See the API reference for more information
    const searchMode = CoreControls.Search.Mode.PAGE_STOP | CoreControls.Search.Mode.HIGHLIGHT;;

    const searchOptions = {
      fullSearch: true // search the full document,
      onResult: (result) => {
        if (result.resultCode === CoreControls.Search.ResultCode.FOUND) {

          if (!result.quads.length) return;

          console.log(result);

          const textQuad = result.quads[0].getPoints();
          const annot = new Annotations.TextHighlightAnnotation();
  
          annot.X = textQuad.x1;
          annot.Width = textQuad.x2 - textQuad.x1;
          annot.PageNumber = result.pageNum;
          annot.Y = textQuad.y3;
          annot.Height = textQuad.y1 - textQuad.y3;
  
          annot.FillColor = new Annotations.Color(0, 0, 255, 0.5);
          annot.StrokeColor = new Annotations.Color(0, 0, 255, 0.5);
  
          annot.Quads = [textQuad];
  
          annotManager.addAnnotation(annot);
          annotManager.drawAnnotationsFromList([annot])
        }
      }
    }

    // start the search
    docViewer.textSearchInit('YOUR_SEARCH_HERE', searchMode, searchOptions);
  })
})
WebViewer(
  { ...options },
  document.getElementById('viewer')
).then(instance => {

  const { 
    documentViewer, 
    Core, 
    annotationManager, 
    Annotations 
  } = instance.Core;

  documentViewer.addEventListener('documentLoaded', () => {

    // Set search modes. See the API reference for more information
    const searchMode = Core.Search.Mode.PAGE_STOP | Core.Search.Mode.HIGHLIGHT;;

    const searchOptions = {
      fullSearch: true // search the full document,
      onResult: (result) => {
        if (result.resultCode === Core.Search.ResultCode.FOUND) {

          if (!result.quads.length) return;

          console.log(result);

          const textQuad = result.quads[0].getPoints();
          const annot = new Annotations.TextHighlightAnnotation();
  
          annot.X = textQuad.x1;
          annot.Width = textQuad.x2 - textQuad.x1;
          annot.PageNumber = result.pageNum;
          annot.Y = textQuad.y3;
          annot.Height = textQuad.y1 - textQuad.y3;
  
          annot.FillColor = new Annotations.Color(0, 0, 255, 0.5);
          annot.StrokeColor = new Annotations.Color(0, 0, 255, 0.5);
  
          annot.Quads = [textQuad];
  
          annotationManager.addAnnotation(annot);
          annotationManager.drawAnnotationsFromList([annot])
        }
      }
    }

    // start the search
    documentViewer.textSearchInit('YOUR_SEARCH_HERE', searchMode, searchOptions);
  })
})