Section:

Compatible JavaScript Frameworks for PDF Viewer

WebViewer is compatible with any JavaScript framework because all it needs is a DOM element to place the document viewing component. The following pre-built samples are available for quick integration, but it's easy to setup WebViewer with any framework.

Integrating Into Other Frameworks

Integrating WebViewer into a JavaScript framework (any framework) is broken down to three steps:

  1. Importing
  2. Instantiating
  3. Calling APIs

Importing

To import WebViewer, you can either import is as a script tag:

HTML

1<script src='PATH_TO_WEBVIEWER/lib/webviewer.min.js'></script>

or as a CommonJS module:

sh

1npm install PATH_TO_WEBVIEWER/lib

JavaScript

1import WebViewer from 'webviewer';

Instantiating

The WebViewer constructor takes two arguments: options and a DOM element. Regardless of the framework, you must pass a DOM element which will contain WebViewer's iframe.

Given the instantiation code:

JavaScript

1WebViewer({
2  path: 'PATH_TO_WEBVIEWER/lib',
3  licenseKey: 'Insert commercial license key here after purchase',
4  initialDoc: 'path/to/doc.pdf'
5}, HTML_DIV_ELEMENT);

you can reference a DOM element based on your framework:

JavaScript

1// Vanilla JS
2WebViewer({ ... }, document.getElementById('viewer'));
3// React
4WebViewer({ ... }, this.viewerRef.current);
5// Angular
6WebViewer({ ... }, this.viewer.nativeElement);

Calling APIs

Before calling APIs, you should wait for appropriate events to be fired from WebViewer.

1// Vanilla JS
2WebViewer(...)
3  .then(instance => {
4    onReady();
5
6    const { documentViewer } = instance.Core;
7    documentViewer.addEventListener('documentLoaded', onDocumentLoaded);
8  });
9// React and Angular
10WebViewer(...)
11  .then(instance => {
12    this.onReady(instance);
13
14    const { documentViewer } = instance.Core;
15    documentViewer.addEventListener('documentLoaded', this.onDocumentLoaded.bind(this, instance));
16  });

and call APIs from viewer instance:

1// Vanilla JS
2const onReady = instance => {
3  // Executed when the viewer is ready
4  // NOTE: Document is not loaded yet
5  instance.UI.enableFilePicker();
6};
7const onDocumentLoaded = instance => {
8  // Executed when the document is loaded
9  // NOTE: Document is not rendered yet
10   instance.UI.getPageCount();
11}
12// React and Angular
13onReady(instance) {
14  // Executed when the viewer is ready
15  // NOTE: Document is not loaded yet
16   instance.UI.enableFilePicker();
17}
18onDocumentLoaded(instance) {
19  // Executed when the document is loaded
20  // NOTE: Document is not rendered yet
21   instance.UI.getPageCount();
22}

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales