Get Started

play_arrow

PDF.js Express Plus

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

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Manually download and integrate PDF.js Express Viewer

This guide will show you how to get started with the PDF.js Express Viewer by running samples and using it to display a simple WebViewer element on a local testing server.

Free license key required.

To use PDF.js Express Viewer you do need a free license key. Please get your free Viewer key here if you do not have one.

Prerequisites

  • PDF.js Express Viewer:
Download PDF.js Express Viewer

Initial setup

  1. Download PDF.js Express Viewer and samples.

  2. Extract PDFJSExpressViewer.zip.

Run samples

  1. Navigate to the extracted PDF.js Express Viewer folder and install the required dependencies to run the samples by executing:

    npm install
    
  2. Next run the samples by executing:

    npm start
    

    You should see a message that reads

    Listening at localhost:XXXX
    

    where XXXX is the port the samples are using.

  3. Navigate to localhost:XXXX and you will be taken to the page with the samples. You can run and browse the source code of these samples freely.

Integrate into your application

  1. If you haven't already done so, download PDF.js Express Viewer and extract it. Move the extracted PDF.js Express Viewer folder into your project directory.

  2. Once you have the files, create a new html webpage in the same project directory. Call it index.html and paste this inside:

    <!DOCTYPE html>
    <html>
    <head>
      <title>PDF.js Express Viewer</title>
    </head>
    <!-- Import PDF.js Express Viewer as a script tag from the lib folder using a relative path -->
    <script src='/lib/webviewer.min.js'></script>
    
    <body>
      <div id='viewer' style={{"width":"1024px","height":"600px","margin":"0 auto"}}></div>
    </body>
    </html>
    
    To import PDF.js Express Viewer as a CommonJS module, see this section.
  3. Next to instantiate PDF.js Express Web Viewer, add this script in body after the viewer div declaration:

<script>
  WebViewer({
    path: 'WebViewer/lib', // path to the PDF.js Express Viewer'lib' folder on your server
    licenseKey: 'Insert license key here',
    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf',
    // initialDoc: '/path/to/my/file.pdf',  // You can also use documents on your server
  }, document.getElementById('viewer'))
  .then(instance => {
    // now you can access APIs through the WebViewer instance
    const { Core, UI } = instance;

    // adding an event listener for when a document is loaded
    Core.documentViewer.addEventListener('documentLoaded', () => {
      console.log('document loaded');
    });

    // adding an event listener for when the page number has changed
    Core.documentViewer.addEventListener('pageNumberUpdated', (pageNumber) => {
      console.log(`Page number is: ${pageNumber}`);
    });
  });
</script>
<script>
  WebViewer({
    path: 'WebViewer/lib', // path to the PDF.js Express'lib' folder on your server
    licenseKey: 'Insert commercial license key here after purchase',
    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf',
    // initialDoc: '/path/to/my/file.pdf',  // You can also use documents on your server
  }, document.getElementById('viewer'))
  .then(instance => {
    // now you can access APIs through the WebViewer instance
    const { Core, UI } = instance;

    // adding an event listener for when a document is loaded
    Core.documentViewer.addEventListener('documentLoaded', () => {
      console.log('document loaded');
    });

    // adding an event listener for when the page number has changed
    Core.documentViewer.addEventListener('pageNumberUpdated', (pageNumber) => {
      console.log(`Page number is: ${pageNumber}`);
    });
  });
</script>

Now, when you run your project, you should see the viewer inside the div you passed into the constructor:

manual-integration

Use more PDF.js Express APIs

  • To use more PDF.js Express APIs, you can add the API calls in the callback of the PDF.js Express constructor. For example, to change the theme of PDF.js Express to dark, you can add:
.then((instance) => {
    const { docViewer, annotManager } = instance;
    // call methods from instance, docViewer and annotManager as needed
    instance.UI.setTheme('dark');
    // ...
  });
.then((instance) => {
    const { documentViewer, annotationManager } = instance.Core;
    // call methods from instance, documentViewer and annotationManager as needed
    instance.UI.setTheme('dark');
    // ...
  });

Refresh your application page (http://localhost:3000/) and you should see the theme has changed:

Dark theme

For resources on how to use more of our PDF.js Express API, check out the PDF.js Express guides and API.

Import as a module

To integrate PDFJS Express as a module, view our npm guide.