Some test text!

menu
search
Framework compatibilitykeyboard_arrow_down

Framework Compatibility

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.

ReactAngularCordovaElectronVueSvelteBlazorTypeScript

linkIntegrating Into Other Frameworks

Integrating WebViewer into a 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(function(instance) {
    onReady();

    var docViewer = instance.docViewer;
    docViewer.on('documentLoaded', onDocumentLoaded);
  });
// React and Angular
WebViewer(...)
  .then(function(instance) {
    this.onReady(instance);

    var docViewer = instance.docViewer;
    docViewer.on('documentLoaded', this.onDocumentLoaded.bind(this, instance));
  }.bind(this));

and call APIs from viewer instance:

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

PDFTron Receives USD$71 Million Growth Investment Led By Silversmith Capital Partners

Learn more
close