Some test text!

Discord Logo

Chat with us

PDFTron is now Apryse, learn more here.

Web / Guides / Integrate via NPM

Platform


PDFTron is now Apryse, learn more here.

Integrating WebViewer via 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 involves manually copying these static files into your dist directory.

Prerequisites

Prior to starting, you should have already installed Node and npm.

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

1. 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.

2. Copy static assets

Next, we must copy the static assets required for WebViewer to run into a public location that will be served via HTTP/HTTPS (usually a dist or build folder). The static files are located in node_modules/@pdftron/webviewer/public.

Below are a few ways you could automate this process:

NPM script

WebPack

Parcel

Other

You could add a script to your package.json that moves the static files for you after your build completes. This will copy all required files into the dist/public folder after your build is complete.
{
  "scripts": {
    "move-static": "cp -a ./node_modules/@pdftron/webviewer/public/. ./dist/public/webviewer",
    "build": "mybuildscript && npm run move-static"
  }
}

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

import WebViewer from '@pdftron/webviewer'

WebViewer({
  path: '/public/webviewer',
}, document.getElementById('viewer'))
  .then(instance => {
    const { UI, Core } = instance;
    const { documentViewer, annotationManager, Tools, Annotations } = Core;
    // call methods from UI, Core, documentViewer and annotationManager as needed

    documentViewer.addEventListener('documentLoaded', () => {
      // call methods relating to the loaded document
    });

    instance.UI.loadDocument('http://fileserver/documents/test.pdf');
  })

Next step

Usage Guides Samples API docs

Get the answers you need: Support