Select a product

PDF.js Express Free Viewerplay_arrow

Professional PDF.js Viewing - Free

PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

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

Compare

play_arrow

Advanced Capabilities

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Integrating PDF.js Express Viewer with Cordova

This guide will help you integrate PDF.js Express Viewer into Cordova applications on the browser. It will help you clone the Cordova sample repository, walk through the project structure, and show you how to call other WebViewer APIs.

Get the Cordova sample source code here

Prerequisites

Node.js is not required for PDF.js Express Viewer
PDF.js Express Viewer does not require Node, npm, or node_modules. It is only recommended to run the samples.
  • Cordova CLI

      npm install -g cordova

    You may have to restart your Command Prompt to access Cordova commands.

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.

Initial setup

  1. Clone the pdfjs-express-viewer-cordova-sample repository:

    git clone https://github.com/pdfjs-express/pdfjs-express-viewer-cordova-sample.git
    
  2. Enter the directory and run npm install:

    cd pdfjs-express-viewer-cordova-sample
    npm install
    

    This will automatically download and extract the PDF.js Express Viewer Package.

You are now ready to run the sample or use more PDF.js Express Viewer APIs.

Sample overview

After initial setup, the pdfjs-express-viewer-cordova-sample directory should be laid out like this:

pdfjs-express-viewer-cordova-sample
├── LICENSE
├── package.json
├── package-lock.json
├── README.md
├── node_modules
│   ├── ...
├── hooks
│   ├── ...
├── res
│   ├── ...
├── platforms
│   └── browser
|       ├── ...
└── www
    ├── index.html
    ├── js
    |   ├── lib
    |   |   ├── ...
    |   └── index.js
    ├── css
    |   └── index.css
    └── img
        └── logo.png

Notable files and directories include:

File/FolderDescription
LICENSELists the copyright and license information.
package.jsonLists the manifest of the project and contains the author/version metadata.
platformsContains the platform specific directories and files required to run the project. The npm install will add the browser platform by default.
wwwContains all the assets such as the main HTML page index.html, the PDF.js Express libraries (in /js/lib/) as well as the JavaScript files that are used for the sample.

www/js/index.js instantiates the WebViewer in the viewer element outlined by index.html. It is also where the WebViewer API calls are placed.

Run the sample

  1. Run the application by executing:

    npm start

    Note: If your build fails, use the following command to see a list of requirements for your added platforms:

    cordova requirements

    Your app should look like this:

    Cordova WebViewer Sample

Use more WebViewer APIs

To call more WebViewer APIs, open /www/js/index.js in your favorite text editor and add the API calls to the callback for the WebViewer instantiation:

WebViewer({
  path: "js/lib",
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/sample.pdf',
}, document.getElementById('viewer'))
  .then((instance) =>{
    const { Core, UI } = instance;

    // See https://pdfjs.express/documentation/learn-more/overview for more info.
    // 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}`);
    });

  });
WebViewer({
  path: "js/lib",
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/sample.pdf',
}, document.getElementById('viewer'))
  .then((instance) =>{
    const { Core, UI } = instance;

    // See https://pdfjs.express/documentation/learn-more/overview for more info.
    // 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}`);
    });
  });

For example, if you want to change the theme of the WebViewer to dark mode, you would add the following:

instance.UI.setTheme('dark');
instance.UI.setTheme('dark');

Execute npm start again and the theme of the viewer will change.

Cordova Sample Dark

Next step

GuidesSamplesAPI docs