PDF.js Express Web Viewer is compatible with any JavaScript framework because all it needs is a DOM element to place the document viewing component.
Integrate into other frameworks
Integrating PDF.js Express into a framework (any framework) is broken down to three steps:
- Importing
- Instantiating
- Calling APIs
Import
To import PDF.js Express, you can either import is as a script tag:
<script src='PATH_TO_EXPRESS_WEBVIEWER/lib/webviewer.min.js'></script>
or as a module.
Instantiate
The PDF.js Express Web Viewer constructor takes two arguments: options and a DOM element. Regardless of the framework, you must pass a DOM element which will contain PDF.js Express' iframe.
Given the instantiation code:
WebViewer({
path: 'PATH_TO_EXPRESS_WEBVIEWER/lib',
licenseKey: 'Insert commercial license key here after purchase',
initialDoc: 'path/to/doc.pdf'
}, HTML_DIV_ELEMENT);
you can reference a DOM element based on your framework:
// Vanilla JS
WebViewer({ ... }, document.getElementById('viewer'));
// React
WebViewer({ ... }, this.viewerRef.current);
// Angular
WebViewer({ ... }, this.viewer.nativeElement);
Call APIs
Before calling APIs, you should wait for appropriate events to be fired from PDF.js Express.
// Vanilla JS
WebViewer(...)
.then(instance => {
onReady();
const { docViewer } = instance;
docViewer.on('documentLoaded', onDocumentLoaded);
});
// React and Angular
WebViewer(...)
.then(instance => {
this.onReady(instance);
const { docViewer } = instance;
docViewer.on('documentLoaded', this.onDocumentLoaded.bind(this, instance));
});
// Vanilla JS
WebViewer(...)
.then(instance => {
onReady();
const { documentViewer } = instance.Core;
documentViewer.addEventListener('documentLoaded', onDocumentLoaded);
});
// React and Angular
WebViewer(...)
.then(instance => {
this.onReady(instance);
const { documentViewer } = instance.Core;
docViewer.addEventListener('documentLoaded', this.onDocumentLoaded.bind(this, instance));
});
and call APIs from viewer instance:
// Vanilla JS
const onReady = instance => {
// Executed when the viewer is ready
// NOTE: Document is not loaded yet
instance.disableFeatures([instance.Feature.FilePicker]);
};
const onDocumentLoaded = instance => {
// Executed when the document is loaded
// NOTE: Document is not rendered yet
instance.getPageCount();
}
// React and Angular
onReady(instance) {
// Executed when the viewer is ready
// NOTE: Document is not loaded yet
instance.disableFeatures([instance.Feature.FilePicker]);
}
onDocumentLoaded(instance) {
// Executed when the document is loaded
// NOTE: Document is not rendered yet
instance.getPageCount();
}
// Vanilla JS
const onReady = instance => {
// Executed when the viewer is ready
// NOTE: Document is not loaded yet
instance.UI.disableFeatures([instance.UI.Feature.FilePicker]);
};
const onDocumentLoaded = instance => {
// Executed when the document is loaded
// NOTE: Document is not rendered yet
instance.Core.documentViewer.getPageCount();
}
// React and Angular
onReady(instance) {
// Executed when the viewer is ready
// NOTE: Document is not loaded yet
instance.UI.disableFeatures([instance.UI.Feature.FilePicker]);
}
onDocumentLoaded(instance) {
// Executed when the document is loaded
// NOTE: Document is not rendered yet
instance.Core.documentViewer.getPageCount();
}
