Section:

Get Started with Apryse WebViewer SDK in a JavaScript app via Manual Install

The WebViewer SDK base package is robust, allowing you to do the following with PDFs inside your app:

  • View
  • Annotate
  • Flatten
  • Extract
  • Search
  • Build forms
  • Calculate using measurements
  • Support layers
  • Customize the UI
  • Meet global accessibility standards through the UI

You can also take advantage of our add-on packages for further capabilities.

Adding WebViewer to your application allows users to use 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 how to integrate the WebViewer SDK into your project. This is the guide for you if you need to add WebViewer outside of a package manager. 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 UI.

Get started video

Get started with the Apryse WebViewer SDK via manual installation video. If you wish, you may skip this section and follows the steps below to get started.

Video of how to integrate Apryse WebViewer SDK into your app through manual install.

Prerequisites

Before you start:

  • Install Node and npm to run the local server.
  • 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. Download WebViewer

Download the WebViewer package (contains library and samples).

2. Integrate WebViewer into your project

Extract the WebViewer package (WebViewer.zip) into your project folder. For this guide, we'll call our project folder manual-integration.

3. Add HTML

1. Create a new index.html file in your manual-integration folder.

2. In your text editor, paste the HTML below into the index.html file. Two essential things to take note of in the HTML are that:

  • The script tag must reference the path of the webviewer.min.js file in the WebViewer folder in your project folder.
  • 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='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>

You can, alternatively, import WebViewer as a CommonJS module.

4. 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 the webviewer.min.js file 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.

4. Specify an initial document to open when WebViewer starts using the initialDoc parameter.

5. Specify the id of the element where you want WebViewer to be mounted. In this case, that's viewer.

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 the WebViewer files are in WebViewer/lib, your code would look something like this:

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://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

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

(Optional) 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 steps

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales