Some test text!

Loading...
Guides
Usage

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.

WebViewer({
  path: '...',
}, document.getElementById('viewer'))
  .then(instance => {
    const { UI, Core } = instance;
  });

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.

WebViewer({
  // options here
}, document.getElementById('viewer'))
  .then(instance => {
    // WebViewer Core APIs
    const { documentViewer, annotationManager } = instance.Core;

    documentViewer.addEventListener('documentLoaded', () => {
      instance.UI.openElements(['notesPanel']);
    });

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annots = annotationManager.getAnnotationsList();
      annots.forEach((annot) => {
        if (annot.PageNumber === 1) {
          // Do something
        }
      });
    });

    iinstance.UI.loadDocument('...');
  });

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.

WebViewer({
  // options here
}, document.getElementById('viewer'))
  .then(instance => {
    // WebViewer UI APIs
    instance.UI.setHeaderItems(header => {
      header.push({
        type: 'actionButton',
        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>',
        onClick: () => {
          // save the annotations
        }
      });
    });
    instance.UI.setTheme('dark');
    instance.UI.setLanguage('es');

    instance.UI.loadDocument('...');
  });

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 .

Get the answers you need: Support

Upcoming Webinar: SDK Features Preview and Live Run-Through | July 14, 2022 at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use