Section:

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.

Apryse Docs Image

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

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer } = instance.Core;
4
5    documentViewer.addEventListener('documentLoaded', async () => {
6      const doc = documentViewer.getDocument();
7      const searchTerm = 'TEXT TO SEARCH';
8      const pageNumber = 1; // page to parse
9
10      const pageText = await doc.loadPageText(pageNumber);
11      let startIndex = 0;
12      let endIndex = 0;
13
14      while (startIndex > -1) {
15        startIndex = pageText.indexOf(searchTerm, endIndex);
16        endIndex = startIndex + searchTerm.length;
17
18        // Get text position for each letter  in the 'searchTerm' found
19        // 'quads' will contain an array for each character between the start and end indexes
20        const quads = await doc.getTextPosition(pageNumber, startIndex, endIndex);
21      }
22    })
23  })

Related Links

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

1WebViewer(...)
2  .then(instance => {
3    const { Annotations, annotationManager } = instance.Core;
4
5    const getTextPositionCallback = quads => {
6      // 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
7      const annotation = new Annotations.TextHighlightAnnotation();
8      annotation.PageNumber = pageIndex + 1;
9
10      annotation.Quads = quads;
11      annotation.StrokeColor = new Annotations.Color(136, 39, 31);
12      annotationManager.addAnnotation(annotation);
13      annotationManager.redrawAnnotation(annotation);
14    }
15  })

Related Links

Related

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales