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.

JavaScript (SDK v8.0+)

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

DocumentViewer#documentLoaded DocumentViewer.setCurrentPage

JavaScript (SDK v6.0+)

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

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

DocumentViewer#documentLoaded DocumentViewer.setCurrentPage

Manual Instantiation

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.

JavaScript (SDK v8.0+)

const documentViewer = new Core.DocumentViewer();

JavaScript (SDK v6.0+)

const documentViewer = new CoreControls.DocumentViewer();

Get Started

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