Some test text!

Framework compatibility

Contents

Importing
Instantiating
Calling APIs
TypeScript definition file
Boilerplates
React
Angular
Cordova
Electron

WebViewer was written to be compatible with any JavaScript framework as all it requires is a DOM element to place the document viewing component inside. This means WebViewer is easy to set up in any framework, including React, Angular, Cordova and Electron.

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 PDFTron 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:

var myWebViewer = new PDFTron.WebViewer({
  path: 'PATH_TO_WEBVIEWER/lib',
  l: 'YOUR_LICENSE_KEY_HERE',
  initialDoc: 'path/to/doc.pdf'
}, HTML_DIV_ELEMENT);

you can reference a DOM element based on your framework:

// Vanilla JS
var myWebViewer = new PDFTron.WebViewer({ ... }, document.getElementById('viewer'));
// React
var myWebViewer = new PDFTron.WebViewer({ ... }, this.viewerRef.current);
// Angular
var myWebViewer = new PDFTron.WebViewer({ ... }, this.viewer.nativeElement);

linkCalling APIs

Before calling APIs, you should wait for appropriate events to be fired from WebViewer - especially ready and documentLoaded events.

// Vanilla JS
document.getElementById('viewer').addEventListener('ready', onReady);
document.getElementById('viewer').addEventListener('documentLoaded', onDocumentLoaded);
// React
this.viewerRef.current.addEventListener('ready', onReady);
this.viewerRef.current.addEventListener('documentLoaded', onDocumentLoaded);
// Angular
this.viewer.nativeElement.addEventListener('ready', onReady);
this.viewer.nativeElement.addEventListener('documentLoaded', onDocumentLoaded);

and call APIs from viewer instance:

var onReady = function() {
  // Executed when the viewer is ready
  // NOTE: Document is not loaded yet
  myWebViewer.getInstance().enableFilePicker();
};
var onDocumentLoaded = function() {
  // Executed when the document is loaded
  // NOTE: Document is not rendered yet
  myWebViewer.getInstance().getPageCount();
}

linkTypeScript definition file

An experimental TypeScript definition file for WebViewer is available: webviewer.d.ts

It's still in progress so let us know if you have any feedback.

linkBoilerplates

We also have boilerplates (samples) for some popular frameworks in Github:

linkReact

https://github.com/PDFTron/webviewer-react-sample

linkAngular

https://github.com/PDFTron/webviewer-angular-sample

linkCordova

https://github.com/PDFTron/webviewer-cordova-sample

linkElectron

https://github.com/PDFTron/webviewer-electron-sample

Get the answers you need: Support

Contents

Importing
Instantiating
Calling APIs
TypeScript definition file
Boilerplates
React
Angular
Cordova
Electron