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

Measurement

play_arrow

PDF.js Express REST API

play_arrow

Integrating Electron with PDF.js Express

This guide will help you integrate a free trial of PDF.js Express into Electron applications on the browser. It will help you clone the Electron sample repository, walk through the project structure, and show you how to call other PDF.js Express APIs. Your free trial includes unlimited trial usage and support from solution engineers.

Get the Electron sample source code here

Prerequisites

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

  • Platform specific prerequisites.

    Electron applications can be built for several platforms and each has its own prerequisites. Please ensure they are fulfilled for your required platform by referring to the electron.js documentation.

No trial license key required.
The trial of PDF.js Express SDK works without a license key. A commercial license key is required for use in a production environment. Please purchase a license key if you do not have one.

Initial setup

  1. Clone the pdfjs-express-electron-sample repository:

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

    cd pdfjs-express-electron-sample
    npm install
    

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

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

Sample overview

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

pdfjs-express-electron-sample
├── LICENSE
├── package.json
├── README.md
├── node_modules
│   ├── ...
├── public
│   ├── index.html
│   ├── files
│   │   ├── ...
│   └── lib
│       ├── ...
└── src
    ├── App.js
    └── main.js

Notable files and directories include:

File/Folder Description
LICENSE Lists the copyright and license information.
package.json Lists the manifest of the project and contains the author/version metadata.
public Contains the static assets such as the main HTML page index.html, the PDF.js Express WebViewer libraries and the sample PDF file
src Contains the .js files for the Electron project.

In short, main.js handles the OS checks and creates the main window for the application with a link to index.html.

App.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. To run the sample, make sure you are in the pdfjs-express-electron-sample directory and execute

    npm start
    

    You should see the application start up. It will load the WebViewer and display the PDF sample in /public/files:

    Electron_App

If you run into issues with installing and/or running the application, please return and ensure you have the prerequisites installed.

Use more WebViewer APIs

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

WebViewer({...}, wvElement
    .then(instance => {
        const { docViewer, annotManager } = instance;
        // call methods from instance, docViewer and annotManager as needed. 
        // you can also access major namespaces from the instance as follows:
        // const Tools = instance.Tools;
        // const Annotations = instance.Annotations;

        // See https://pdfjs.express/documentation/learn-more/overview for more info.
        docViewer.on('documentLoaded', () => {
            // call methods relating to the loaded document
        });
});

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

instance.setTheme('dark');

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

Electron_Dark_Theme

Next step

Guides Samples API docs

You can find the full source code for this project here.

Troubleshooting

Network Failure
More information about fixing the Network Failure issue on WebViewer.