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

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

DocumentViewer.getDocument Document.rotatePages

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

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

DocumentViewer.getPageCount DocumentViewer.getRotation

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

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

DocumentViewer.getCurrentPage

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

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

DocumentViewer.setCurrentPage

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

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

DocumentViewer.getSelectedText

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

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

DocumentViewer.getSelectedText

Next steps

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