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.

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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