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

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