Some test text!

Search
Hamburger Icon

Web / Guides / Working with documents

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.

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

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.

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

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.

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

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.

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

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.

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

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

Next steps

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

Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales