Section:

Get Started with Apryse WebViewer SDK in a JavaScript app via NPM

The Apryse WebViewer SDK delivers high-quality rendering, conversion, and document manipulation capabilities through a single, customizable component. Supporting PDF, Office, CAD, and images, it's fully featured out of the box, delivering great usability and functionality.

Adding WebViewer to your application allows users to view and edit PDFs without going outside of your application. This reduces reliance on third-party systems, multiple vendors, and file downloads for everyday tasks without compromising control, compliance, or security.

Interact with our showcase demo to test out all of the Apryse WebViewer SDK functionality.

This guide walks you through steps to integrate the Apryse WebViewer SDK into your project. We'll use an HTML-based project as our example project throughout this guide. By the end, you’ll be able to render a PDF document in the user interface (UI).

Get started video

Get started with the Apryse WebViewer SDK via NPM by viewing our video. You can also skip the video and follow the steps below to get started.

Get started video for Apryse WebViewer SDK via NPM

Prerequisites

Before you start:

  • Install Node and npm to use as your run-time environment and package manager.
  • Create a folder for your project.
  • Open a text editor like Visual Studio Code.
  • 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.

1. Integrate WebViewer into your project

Run the following command on the command line from your project directory to install WebViewer into your project:

sh

1npm i @pdftron/webviewer

This will download the assets required to use WebViewer.

2. Create public folder

1. Create a folder in your project named public where we'll store the code as part of your project.

2. Within the new public folder, create a file named index.html.

3. Copy static assets

1. Create a subfolder within the new public folder you created and name it lib/webviewer.

2. Next, copy specific static assets required for WebViewer. The static files to copy are located in node_modules/@pdftron/webviewer/public in your project and are as follows:

  • core
  • ui
  • webviewer.min.js

3. Paste the select files you copied to the new lib/webviewer public location that will be served via HTTP/HTTPS.

An image of the project files and folders you need to create and copy from in your project.

The project files and folders (in red) that you need to copy into your project (in blue).

Alternatively, you can automate this process using one of the scripts below (optional):

You can add a script to your package.json that moves the static files for you after your build completes. This copies all required files into the /public/lib/webviewer folder after your build is complete.

JSON

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

Read more about copying WebViewer static assets.

4. Add HTML

Copy the HTML below and paste it into your index.html file in your project. Two essential things to take note of in the HTML are that:

  • The script tag must reference the path of the JS file you copied into the public folder you created.
  • The div element viewer id is where WebViewer will be mounted. In this example it also contains styling elements for the viewer, though you could do so using CSS if you prefer.

HTML

1<html>
2<head>
3  <title>Basic WebViewer</title>
4  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
5</head>
6
7<!-- Import WebViewer as a script tag -->
8<script src='/lib/webviewer/webviewer.min.js'></script>
9
10<body>
11  <div id='viewer' style='width: 1024px; height: 600px; margin: 0 auto;'></div>
12</body>
13</html>

5. Add JavaScript code

Next, you'll copy and paste in the script tag that includes the WebViewer constructor.

  1. Copy, then paste the script below into the index.html file in your project after the div and before the close body tag.
  2. Add the relative location of where you pasted the static files core, ui, and webviewer.min.js, using the path parameter.
  3. Add your own license key in place of 'YOUR_LICENSE_KEY'. If you've created your license key and you're logged in, your key is already in the code below.

Starting in version 11, WebViewer instantiates using a web component instead of an iframe by default; however, both methods are available. See this guide for more information.

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

JavaScript (SDK v10.2+)

1<script>
2WebViewer({
3  path: '/lib/webviewer', // Path to the 'lib' folder on your server
4  licenseKey: 'YOUR_LICENSE_KEY', //Sign up to get a license key at https://dev.apryse.com
5  initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf'
6// initialDoc: '/path/to/my/file.pdf', // You can also use documents on your server
7}, document.getElementById('viewer'))
8  .then(instance => {
9    const { documentViewer, annotationManager } = instance.Core;
10
11// Call methods from instance, documentViewer, and annotationManager as needed
12
13// You can also access major namespaces from the instance as follows:
14  // const Tools = instance.Core.Tools;
15 //  const Annotations = instance.Core.Annotations;
16 
17// call methods relating to the loaded document
18    documentViewer.addEventListener('documentLoaded', () => {
19    });
20  })
21</script>

Related Links

6. View PDF in WebViewer UI

After you've saved all of the files, you'll serve the webpage so you can see the WebViewer UI and the PDF you included to open in WebViewer. We'll use http-server to view the webpage in this example.

  1. Run the following command on the command line from your project directory to run http-server which is a simple web server.
  2. Click the localhost link created in your terminal to view the WebViewer UI and PDF file locally.

sh

1npx http-server -a localhost

Next Steps

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales