Some test text!

menu
Text positionkeyboard_arrow_down

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.

Points of Quads

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

linkGetting text position

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 { docViewer } = instance;

    docViewer.on('documentLoaded', () => {
      const doc = docViewer.getDocument();
      const searchTerm = 'TEXT TO SEARCH';
      const pageIndex = 0; // page to parse

      doc.loadPageText(pageIndex, pageText => {
        const getTextPositionCallback = quads => {
          // 'quads' will contain an array for each character between the start and end indexes
        }
        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
          doc.getTextPosition(pageIndex, startIndex, endIndex, getTextPositionCallback);
        }
      });
    })
  })

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, annotManager } = instance;

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

linkRelated

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.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close