Contents

Promisified instantiation
New options

A brand new WebViewer has been released with a better instantiation function! The promise, which is returned from the new instantiation function, contains not only the APIs but also objects and namespaces from the window inside the iframe, making it so much easier to access and extend them. The old way of instantiating is still supported for backwards compatibility as well.

See WebViewer changelog for details.

linkPromisified instantiation

The main purpose of the new instantiation function was to do the following:

  1. Get rid of ready event, which was often confused with documentLoaded event
  2. Make it easier to access objects and namespaces inside the iframe, such as annotManager and Annotations

With the new function in place, you can change the following code from 5.0

var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer({
  path: 'path/to/lib',
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf'
}, viewerElement);

viewerElement.addEventListener('ready', function() {
  var instance = viewer.getInstance();

  instance.disableElements([ 'notesPanel' ]);

  var docViewer = instance.docViewer;
  var annotManager = docViewer.getAnnotationManager();

  annotManager.on('annotationSelected', function() {
    console.log('annotation has been selected');
  });
});

viewerElement.addEventListener('documentLoaded', function() {
  var instance = viewer.getInstance();
  instance.setZoomLevel('100%');
});

into this in 5.1

WebViewer({
  path: 'path/to/lib',
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf'
}, document.getElementById('viewer'))
  .then(function(instance) {
    // at this point, the viewer is 'ready'
    var docViewer = instance.docViewer;
    var annotManager = instance.annotManager;

    instance.disableElements([ 'notesPanel' ]);

    docViewer.on('documentLoaded', function() {
      instance.setZoomLevel('100%');
    });

    annotManager.on('annotationSelected', function() {
      console.log('annotation has been selected');
    });
  });

Note that the new way makes code more readable by keeping all event-handlers in one place and guarantees that you will have instance defined when you are attaching the handlers (and you don't have to call getInstance anymore). The old way of instantiating is still supported for backwards compatibility. See WebViewer class for more information.

linkNew options

Version 5.1 also introduces two new constructor/document-loading options: [preloadWorker] and [extension].

preloadWorker is a constructor option that allows you to specify which worker files to pre-load. For example,

WebViewer({
  ...,
  preloadWorker: 'office'
}, viewerElement)

will preload the worker files for office to improve the user experience when loading an office file.

extension is a constructor/document-loading option that allows you to specify the extension of the file, when it's unclear from the url. For example,

WebViewer({
  ...,
  initialDoc: 'path/to/s3/without/document/extension',
  extension: 'docx'
}, viewerElement)
WebViewer({
  ...
}, viewerElement)
  .then(function(instance) {
    instance.loadDocument('path/to/s3/without/document/extension', {
      extension: 'docx'
    });
  });

will allow WebViewer to interpret the document as a docx file.

For all the changes see the WebViewer 5.1 changelog.