Section:

Standard API for WebViewer

WebViewer provides a standard API that works the same way for any of the deployment options. This allows you to easily try out different WebViewer deployment options with minimal code changes.

WebViewer instance

The WebViewer initializer gives you an instance object that provides a number of functions and objects. The standard API is a combination of the default WebViewer UI APIs and the WebViewer Core APIs.

JavaScript

1WebViewer({
2  path: '...',
3}, document.getElementById('viewer'))
4  .then(instance => {
5    const { UI, Core } = instance;
6  });

Core Namespace

The Core namespace contains classes and objects for working with the document viewer and documents in WebViewer. Of the many objects and classes within this space, documentViewer and annotationManager are commonly used objects that will allow you to work with the document and annotations.

1WebViewer({
2  // options here
3}, document.getElementById('viewer'))
4  .then(instance => {
5    // WebViewer Core APIs
6    const { documentViewer, annotationManager } = instance.Core;
7
8    documentViewer.addEventListener('documentLoaded', () => {
9      instance.UI.openElements(['notesPanel']);
10    });
11
12    documentViewer.addEventListener('annotationsLoaded', () => {
13      const annots = annotationManager.getAnnotationsList();
14      annots.forEach((annot) => {
15        if (annot.PageNumber === 1) {
16          // Do something
17        }
18      });
19    });
20
21    iinstance.UI.loadDocument('...');
22  });

Related Links

Some other notable namespaces that you can find under Core are:

UI Namespace

The UI namespace hosts APIs, objects, and classes in working with the WebViewer UI. Many of the customizations are available through the APIs found within this namespace.

1WebViewer({
2  // options here
3}, document.getElementById('viewer'))
4  .then(instance => {
5    // WebViewer UI APIs
6    instance.UI.setHeaderItems(header => {
7      header.push({
8        type: 'actionButton',
9        img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
10        onClick: () => {
11          // save the annotations
12        }
13      });
14    });
15    instance.UI.setTheme('dark');
16    instance.UI.setLanguage('es');
17
18    instance.UI.loadDocument('...');
19  });

Related Links

If you would like to learn more about the UI in WebViewer, feel free to check out our guides on the UI.

Exceptions

The PDFNet namespace is the main exception and is also known as the full API. See this guide for more information about what it is and why you might want to use it. It will only be fully available when the full API is enabled via the WebViewer instance.

The permanent page manipulation APIs on the Document object and the applyRedactions function on AnnotationManager are only available in client only mode or with WebViewer Server. To achieve similar functionality with a custom server you would do the processing on the server side and reconvert the file.

Next steps

To get started with loading your documents, please check out our document loading guide.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales