PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

side menu

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 NPM

To integrate PDFJS Express into your project with NPM, follow the steps below.

If you prefer to integrate PDFJS Express manually (via zip file), see this guide

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.

1) Install with NPM

Run the following command in your project:

npm i @pdftron/pdfjs-express-viewer

2) Copy static files

After installing, you will need to copy the static files located in node_modules/@pdftron/pdfjs-express-viewer/public into a place that will be served alongside your other website files.

There are a few ways you can automate this process:

npm script

You could add a script to your package.json that moves the requires for you after your build completes.

{
  "scripts": {
    "move-static": "cp -a ./node_modules/@pdftron/pdfjs-express-viewer/public/. ./dist/public/pdfjsexpress",
    "build": "mybuildscript && npm run move-static"
  }
}

This will copy all required files into the dist/public folder after your build is complete.

WebPack

If you're using webpack to bundle your project, you can use copy-webpack-plugin to copy files for you automatically.

Install the package:

npm install copy-webpack-plugin --save-dev

then add the following to your webpack config:

module.exports = {
  ...otherConfig,
  plugins: [
    new CopyPlugin([{ 
        from: './node_modules/@pdftron/pdfjs-express-viewer/public',
        to: './dist/public/pdfjsexpress' 
      }]
    ),
  ],
};

Parcel

If you are using parcel to bundle your project, you can use parcel-plugin-static-files-copy to copy your files.

Install the package:

npm i parcel-plugin-static-files-copy --save-dev

Then add the following to your package.json

{
  "staticFiles": {
    "staticPath": [
      {
        "staticPath": "node_modules/@pdftron/pdfjs-express-viewer/public",
        "staticOutDir": "public/pdfjsexpress"
      }
    ],
    "watcherGlob": "**"
  }
}

3. Usage

When using WebViewer in your code, you will have to tell it where you copied these static files using the path parameter.

For example, if you copied the static files into dist/public/pdfjsexpress, your code would look something like this:

import PDFJSExpress from '@pdftron/pdfjs-express-viewer'

PDFJSExpress({
  path: '/public/pdfjsexpress',
  licenseKey: 'YOUR_KEY_HERE',
}, document.getElementById('viewer'))
  .then(instance => {
    // use APIs here
  })

For more info on using PDFJS Express, see this guide