PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

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

Core engine 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

Creating your own UI using the core SDK

If you are using the default UI, you rarely have to worry about calling Core functions directly. However, you can choose not to use the provided UIs and create your own from scratch. The example below shows how to load a document in a custom viewer.

View a complete sample here

Using the DocumentViewer class will give you a scrolling viewer with caching, pre-rendering, optimized zooming, text selection, annotation creation and a number of other features built in.

HTML

First we set up our HTML file. There are two main scripts we need to load:

  • core/webviewer-core.min.js
  • core/pdfjs/PDFJSDocumentType.js
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDF.js Express Custom UI</title>
  </head>

  <body>
    <div id="app">
        <div id="scroll-view">
          <div id="header">
            <button id="rotate">Rotate</button>
            <button id="zoom-in">Zoom in</button>
            <button id="zoom-out">Zoom out</button>
          </div>

          <div id="viewer"></div>
      </div>
    </div>

    <!-- Here we load the required files for PDF.js Express -->
    <script src="core/webviewer-core.min.js"></script>
    <script src="core/pdfjs/PDFJSDocumentType.js"></script>

    <!-- Load our own JS here -->
    <script src='index.js'></script>
  </body>
</html>

index.js

Inside of a Javascript file, add the following code:

// index.js

const viewer = document.getElementById('viewer');
const scrollView = document.getElementById('scroll-view');

/**
 * Set the worker path to the static `core` folder
 */
Core.setWorkerPath('/core');

/**
 * Replace this with your actual license key
 */
const licenseKey = 'Insert commercial license key here after purchase';

const docViewer = new Core.DocumentViewer();

/**
 * Add some global variables for "PDFJSDocumentType.js" to use.
 * 
 * These are normally set by the default UI.
 */
window.documentViewer = docViewer;
window.WebViewer = {};
window.WebViewer['l'] = () => licenseKey

/**
 * Set the divs that the viewer will mount to
 */
docViewer.setScrollViewElement(scrollView);
docViewer.setViewerElement(viewer);

/**
 * Load your document and enable annotations
 */
docViewer.loadDocument('/pdfjs-express.pdf');
docViewer.setOptions({ enableAnnotations: true });

/**
 * Bind events in your UI
 */
document.getElementById('rotate').onclick = () => {
  docViewer.rotateClockwise()
}

document.getElementById('zoom-in').onclick = () => {
  docViewer.zoomTo(docViewer.getZoom() + 0.25);
}

document.getElementById('zoom-out').onclick = () => {
  docViewer.zoomTo(docViewer.getZoom() - 0.25);
}

Deeper integration

Once you have the required assets loads and a basic UI working, you can start interacting with the Core namespace, which is available globally.

Some of the main namespaces and classes that Core exposes are:

See API documentation for the full list.

Feel free to reference our default UI's source code to see how we implement certain functionality using the Core namespace.