Get text position in PDF documents

Text positions in WebViewer are represented by Quad objects. Quads are made up of 4 pairs of XY coordinates that represent the 4 corners of a rectangle.

Text that is split up across multiple lines or columns would be represented by an array of Quad objects, one Quad for each section.

The string received by the loadPageText callback function can be used by the getTextPosition function to get the position of individual character on a page. This can be useful for creating annotations on top of text. An example of getTextPosition being used with loadPageText can be found below

WebViewer(...)
  .then(instance => {
    const { documentViewer } = instance.Core;

    documentViewer.addEventListener('documentLoaded', async () => {
      const doc = documentViewer.getDocument();
      const searchTerm = 'TEXT TO SEARCH';
      const pageNumber = 1; // page to parse

      const pageText = await doc.loadPageText(pageNumber);
      let startIndex = 0;
      let endIndex = 0;

      while (startIndex > -1) {
        startIndex = pageText.indexOf(searchTerm, endIndex);
        endIndex = startIndex + searchTerm.length;

        // Get text position for each letter  in the 'searchTerm' found
        // 'quads' will contain an array for each character between the start and end indexes
        const quads = await doc.getTextPosition(pageNumber, startIndex, endIndex);
      }
    })
  })

The getTextPosition callback function will receive an array of Quad objects for each letter between the start and end indexes. This can be used to create annotations on top of text by setting an annotation 'Quads' to be the array received by the callback function. An example of this can be found below

WebViewer(...)
  .then(instance => {
    const { Annotations, annotationManager } = instance.Core;

    const getTextPositionCallback = quads => {
      // quads will be an array of objects with x1,y1,x2,y2,x3,y3,x4, and y4 values. Each of these object will be for a letter in the search text
      const annotation = new Annotations.TextHighlightAnnotation();
      annotation.PageNumber = pageIndex + 1;

      annotation.Quads = quads;
      annotation.StrokeColor = new Annotations.Color(136, 39, 31);
      annotationManager.addAnnotation(annotation);
      annotationManager.redrawAnnotation(annotation);
    }
  })

• Selected text
• Text search