Section:

Get Started with WebViewer via NPM

This guide will show you how to get started with the WebViewer SDK through npm. By the end of this guide, you should be able load WebViewer into any app.

Prerequisites

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

Get your Apryse trial key.

License Key

Apryse collects some data regarding your usage of the SDK for product improvement.

If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.

Integrate into your application

1. Install via NPM

Run the following command in your project:

sh

1npm 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:

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.

JSON

1{
2  "scripts": {
3    "move-static": "cp -a ./node_modules/@pdftron/webviewer/public/. ./dist/public/webviewer",
4    "build": "mybuildscript && npm run move-static"
5  }
6}

3. Usage

When using WebViewer in your code, you will have to tell it where you copied these static files using the path parameter. Add your own license key in place of 'YOUR_LICENSE_KEY'.

Starting in version 10.2 you can choose to instantiate WebViewer using a web component instead of an iframe. See this guide for more information.

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

1import WebViewer from '@pdftron/webviewer'
2
3WebViewer({
4  path: '/public/webviewer',
5  licenseKey: 'YOUR_LICENSE_KEY',
6}, document.getElementById('viewer'))
7  .then(instance => {
8    const { UI, Core } = instance;
9    const { documentViewer, annotationManager, Tools, Annotations } = Core;
10    // call methods from UI, Core, documentViewer and annotationManager as needed
11
12    documentViewer.addEventListener('documentLoaded', () => {
13      // call methods relating to the loaded document
14    });
15
16    instance.UI.loadDocument('https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf');
17  })

Related Links

Next step

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales