WebViewer 5.1 - Promisified instantiation
By Apryse | 2019 Jun 05
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.
Promisified instantiation
The main purpose of the new instantiation function was to do the following:
- Get rid of
readyevent, which was often confused withdocumentLoadedevent - 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.
New 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.
Apryse
Share this post
