chevron_right
close
chevron_right

Get Started

chevron_right

Learn more

chevron_right

Open a document

chevron_right

Viewer

chevron_right

UI Customization

chevron_right

Annotations

chevron_right

Collaboration

chevron_right

Forms

chevron_right

Signature

chevron_right

Measurement

Download & integration for PDF.js Express Viewer

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

Prerequisites

  • PDF.js Express Web Viewer:

Download PDF.js Express

Initial setup

  1. Download PDF.js Express and samples.

  2. Extract PDFJSExpress.zip.

Run samples

  1. Navigate to the extracted PDF.js Express 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.

Samples

Integrate into your application

  1. If you haven't already done so, download PDF.js Express and extract it. Move the extracted PDF.js Express 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</title>
    </head>
    
    <!-- Import PDF.js Express 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 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: '/path/to/lib', // path to the PDFTron 'lib' folder on your server 
        licenseKey: 'Insert license key here', // optional
        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(function(instance) {
        // call APIs here
      });
    
    </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(function(instance) {
        var docViewer = instance.docViewer;
        var annotManager = instance.annotManager;
        // call methods from instance, docViewer and annotManager as needed
        instance.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.