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.

Getting 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

JavaScript (SDK v8.0+)

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

WebViewerInstance DocumentViewer#documentLoaded DocumentViewer.getDocument Document.loadPageText Document.getTextPosition

JavaScript (SDK v7.0+)

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

    docViewer.on('documentLoaded', async () => {
      const doc = docViewer.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);
      }
    })
  })

WebViewerInstance DocumentViewer#documentLoaded DocumentViewer.getDocument Document.loadPageText Document.getTextPosition

JavaScript (SDK v6.0+)

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

WebViewerInstance DocumentViewer#documentLoaded DocumentViewer.getDocument Document.loadPageText Document.getTextPosition

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

JavaScript (SDK v8.0+)

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

WebViewerInstance AnnotationManager.addAnnotation AnnotationManager.redrawAnnotation

JavaScript (SDK v7.0+)

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

WebViewerInstance AnnotationManager.addAnnotation AnnotationManager.redrawAnnotation

JavaScript (SDK v6.0+)

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

WebViewerInstance AnnotationManager.addAnnotation AnnotationManager.redrawAnnotation

Related

• Selected text
• Text search