Some test text!

Search
Hamburger Icon

Web / Frameworks / Framework compatibility

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 Electron Vue NuxtJs 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 { documentViewer } = instance.Core;
    documentViewer.addEventListener('documentLoaded', onDocumentLoaded);
  });
// React and Angular
WebViewer(...)
  .then(instance => {
    this.onReady(instance);

    const { documentViewer } = instance.Core;
    documentViewer.addEventListener('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.UI.enableFilePicker();
};
const onDocumentLoaded = instance => {
  // Executed when the document is loaded
  // NOTE: Document is not rendered yet
   instance.UI.getPageCount();
}
// React and Angular
onReady(instance) {
  // Executed when the viewer is ready
  // NOTE: Document is not loaded yet
   instance.UI.enableFilePicker();
}
onDocumentLoaded(instance) {
  // Executed when the document is loaded
  // NOTE: Document is not rendered yet
   instance.UI.getPageCount();
}

Get the answers you need: Chat with us