Overview of the DocumentViewer

The WebViewer SDK provides an important object, the DocumentViewer. When loaded, the WebViewer instance provides a DocumentViewer object, along with other objects and namespaces , that is wired to the viewer that was just mounted. The DocumentViewer allows you to work with documents without working in detail with WebViewer Core.

WebViewer(...)
  .then(instance => {
    // The documentViewer is wired to the mounted viewer
    const { documentViewer } = instance.Core;

    // Change to the second page when a document loads
    documentViewer.addEventListener('documentLoaded', () => {
      documentViewer.setCurrentPage(2);
    });
  });

The DocumentViewer class is found in the Core namespace . You can instantiate it without any additional parameters but you should set the viewer and scroll view elements that it should work with. This is only necessary when creating your own custom UI which you can read more about in our guide .

const documentViewer = new Core.DocumentViewer();

Working with documents
Working with documents using the DocumentViewer object

Adjusting layout and zoom
Setting the viewing layout using the DocumentViewer object

Adjusting layout and zoom
Showing how to use the default tools with the DocumentViewer object