PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

side menu

Get Started

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

Compare

play_arrow

Advanced Capabilities

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Framework compatibility for PDF.js Express

The following features are available in:

check

PDF.js Express Viewer

help_outline

PDF.js Express Viewer is a free viewer with limited capabilities compared to PDF.js Express Plus

check

PDF.js Express Plus

help_outline

PDF.js Express Plus is a commercial PDF SDK for viewing, annotating, signing, form filling and more

PDF.js Express Web Viewer is compatible with any JavaScript framework because all it needs is a DOM element to place the document viewing component.

Integrate into other frameworks

Integrating PDF.js Express into a framework (any framework) is broken down to three steps:

  1. Importing
  2. Instantiating
  3. Calling APIs

Import

To import PDF.js Express, you can either import is as a script tag:

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

or as a module.

Instantiate

The PDF.js Express Web Viewer constructor takes two arguments: options and a DOM element. Regardless of the framework, you must pass a DOM element which will contain PDF.js Express' iframe.

Given the instantiation code:

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

Call APIs

Before calling APIs, you should wait for appropriate events to be fired from PDF.js Express.

// 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));
  });
// 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;
    docViewer.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.disableFeatures([instance.Feature.FilePicker]);
};
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.disableFeatures([instance.Feature.FilePicker]);
}
onDocumentLoaded(instance) {
  // Executed when the document is loaded
  // NOTE: Document is not rendered yet
  instance.getPageCount();
}
// Vanilla JS
const onReady = instance => {
  // Executed when the viewer is ready
  // NOTE: Document is not loaded yet
  instance.UI.disableFeatures([instance.UI.Feature.FilePicker]);
};
const onDocumentLoaded = instance => {
  // Executed when the document is loaded
  // NOTE: Document is not rendered yet
  instance.Core.documentViewer.getPageCount();
}
// React and Angular
onReady(instance) {
  // Executed when the viewer is ready
  // NOTE: Document is not loaded yet
  instance.UI.disableFeatures([instance.UI.Feature.FilePicker]);
}
onDocumentLoaded(instance) {
  // Executed when the document is loaded
  // NOTE: Document is not rendered yet
  instance.Core.documentViewer.getPageCount();
}