Section:

Integrate WebViewer JavaScript PDF Viewer & Editor into a Web App

This guide will show you how to get started with the WebViewer SDK through manual installation. By the end of this guide, you should be able load WebViewer into any app. This is the guide for you if you are looking to add WebViewer outside of a package manager.

Prerequisites

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

Downloads

  • WebViewer package (contains library and samples):
  • 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. Setup Local Server

To start, we need a server environment ready. If you do not have a server, follow these steps: * Create a folder for your project. This guide will assume your project is called myServer. * Open a terminal in that folder and execute:

sh

1```
2npm install -g http-server
3```

2. Extract WebViewer.zip

Extract the WebViewer package (WebViewer.zip) into your project directory (/myServer).

3. Create index.html

Create a new index.html webpage in the same project directory and paste this inside:

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='WebViewer/lib/webviewer.min.js'></script>
9
10<body>
11  <div id='viewer' style='width: 1024px; height: 600px; margin: 0 auto;'></div>
12</body>
13</html>

To import WebViewer as a CommonJS module, see this section.

4. Add Necessary Scripts

Next to instantiate WebViewer, add this script to the body after the viewer div declaration from the previous step. 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.

1<script>
2  WebViewer({
3    path: 'WebViewer/lib', // path to the Apryse 'lib' folder on your server
4    licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
5    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.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    documentViewer.addEventListener('documentLoaded', () => {
18      // call methods relating to the loaded document
19    });
20  });
21</script>

Related Links

5. Serve Your Website

To start your local server, run the following:

sh

1http-server -a localhost

Open http://localhost:8080/index.html on your browser. If you already have the page open, refresh the page. You should see WebViewer start up.

Import as a module

You can also import WebViewer as a CommonJS module when installed manually. It is recommended to install via npm if you have the option.

First, install the module. Replace PATH_TO_WEBVIEWER with the path from your package.json file to the WebViewer lib folder.

sh

1npm install PATH_TO_WEBVIEWER/lib

Then use the following import statement in your JavaScript file.

JavaScript

1import WebViewer from 'webviewer';
2// import Apryse instead of WebViewer for 4.0 ~ 5.0

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