Some test text!

menu

Install with NPM

WebViewer versions 6.0+ can be installed VIA npm. Since WebViewer requires static resources to be served (which cannot be bundled), there is an extra step required which involved manually copying these static files into your dist directory.

link1. Install via NPM

Run the following command in your project:

npm i @pdftron/webviewer

This will install the main JS entrypoint, as well as download some static assets required for WebViewer to run.

link2. Copy static assets

Next we must copy the static assets required for WebViewer to run. The files are located in node_modules/@pdftron/webviewer/public and must be moved into a location that will be served and publicly accessible (usually a dist or build folder). Below is a few ways you could 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/webviewer/public/. ./dist/public/webviewer",
    "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/webviewer/public',
        to: './dist/public/webviewer' 
      }]
    ),
  ],
};

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/webviewer/public",
        "staticOutDir": "public/webviewer"
      }
    ],
    "watcherGlob": "**"
  }
}

Other

If you're using a different package manager, look for a plugin that copies static files at build time.

link3. 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/webviewer, your code would look something like this:

import WebViewer from '@pdftron/webviewer'

WebViewer({
  path: '/public/webviewer',
}, document.getElementById('viewer'))
  .then(instance => {
    // use APIs here
  })

For more info on using WebViewer, see this guide

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close