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.

React Angular Cordova Electron Vue Svelte Blazor TypeScript Node.js

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:

<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';

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:

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

Calling 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.