Some test text!

menu
Framework compatibilitykeyboard_arrow_down

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.

ReactAngularCordovaElectronVueSvelteBlazorTypeScriptNode.js

linkIntegrating Into Other Frameworks

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

  1. Importing
  2. Instantiating
  3. Calling APIs

linkImporting

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

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

or as a CommonJS module:

npm install PATH_TO_WEBVIEWER/lib
import WebViewer from 'webviewer';

linkInstantiating

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:

WebViewer({
  path: 'PATH_TO_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);

linkCalling APIs

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

// 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));
  });

and call APIs from viewer instance:

// Vanilla JS
const onReady = instance => {
  // Executed when the viewer is ready
  // NOTE: Document is not loaded yet
  instance.enableFilePicker();
};
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.enableFilePicker();
}
onDocumentLoaded(instance) {
  // Executed when the document is loaded
  // NOTE: Document is not rendered yet
  instance.getPageCount();
}

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our upcoming webinar to learn about how to collaborate on videos frame by frame directly in your browser

Save your seat
close