Section:

Working with documents using the Document Viewer

Whereas the WebViewer instance is the entry point to the WebViewer SDK, the DocumentViewer is the main object responsible for the interaction with the viewing of a loaded document. The main APIs and events are focused around the viewing of the document.

In this guide, we will show you some common APIs that work with the document through the use of the DocumentViewer object. You can then apply these to get page information for a printing process or programmatically starting a text search for key terms.

Getting the loaded document

To get a Document object representing the currently loaded document, the DocumentViewer provides the getDocument function. With the document object, you can interact directly with the document.

JavaScript

1documentViewer.addEventListener('documentLoaded', () => {
2  const doc = documentViewer.getDocument();
3  doc.rotatePages([1], Core.PageRotation.E_90);
4});

Related Links

Reading the page count

To read the number of pages of a loaded document, the DocumentViewer provides a getPageCount function. This is often used in for loops to loop through pages. This API is also availble on the Document class.

JavaScript

1documentViewer.addEventListener('documentLoaded', () => {
2  const pageCount = documentViewer.getPageCount();
3  for (let i = 1; i <= pageCount; i++) {
4    // Call other APIs
5    const viewingRotation = documentViewer.getRotation(i);
6    console.log(viewingRotation);
7  }
8});

Related Links

Getting the current page number

When scrolling or changing pages is available to a user, you can check which page they are on using the getCurrentPage DocumentViewer API. The current page number may also be necessary when calling other APIs like rotatePages to rotate the current page.

JavaScript

1documentViewer.addEventListener('documentLoaded', () => {
2  const currentPageNum = documentViewer.getCurrentPage(); // 1-indexed
3});

Related Links

Changing pages

When scrolling or changing pages is available to a user, you can change the page that the user is on programmatically. This could be in response to clicking a button or perhaps going back to where a user last left off. This is done using the setCurrentPage API.

JavaScript

1documentViewer.addEventListener('documentLoaded', () => {
2  documentViewer.setCurrentPage(3); // Goes to page 3 of the document
3});

Related Links

Getting text selection

A textSelected event can be triggered from selecting text but it may be necessary to fetch the selected text outside of this event. This can be done with the getSelectedText API.

JavaScript

1function onMyButtonClick() {
2  const text = documentViewer.getSelectedText();
3  // ...
4}
5document.getElementById('myBtn').addEventListener('click', onMyButtonClick);

Related Links

If you need to know the location of the text, then getSelectedTextQuads will give you a quad/rectangle representing the location and size of the selection.

JavaScript

1function onMyButtonClick() {
2  const quads = documentViewer.getSelectedTextQuads();
3  const pages = Object.keys(quads);
4  pages.forEach((pageNum) => {
5    const selections = quads[pageNum];
6    const rects = selections.map((quad) => new Core.Math.Rect(quad.x4, quad.y4, quad.x2, quad.y2)); // Top-left and bottom-right
7    // Use to create annotations
8  });
9}
10document.getElementById('myBtn').addEventListener('click', onMyButtonClick);

Related Links

Initiating a text search

Initiating a text search through the DocumentViewer offers finer control over the regular search. You may also be interested in searching with a regular expression which is entirely possible with textSearchInit API.

JavaScript

1function onRegexSearchClicked() {
2  documentViewer.textSearchInit(\[0-9]{3}\i, Core.Search.Mode.REGEX | Core.Search.Mode.PAGE_STOP, {
3      fullSearch: true,
4      onResult: result => {
5        // with 'PAGE_STOP' mode, the callback is invoked after each page has been searched.
6        if (result.resultCode === Core.Search.ResultCode.FOUND) {
7          const textQuad = result.quads[0].getPoints(); // getPoints will return Quad objects
8          // now that we have the result Quads, it's possible to highlight text or create annotations on top of the text
9        }
10      }
11  });
12}
13document.getElementById('mySearchBtn').addEventListener('click', onRegexSearchClicked);

Related Links

Next steps

Go deeper with the document APIs by reading on how to get the file data or manipulate the document further.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales