Some test text!

Home
Guides
Discord Logo

Chat with us

PDFTron is now Apryse, learn more here.

Web / Guides / Manual integration

Platform

Documentation

PDFTron is now Apryse, learn more here.

Manually integrating WebViewer

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.

If you require an added capability for annotating mp4, webm, and ogg videos frame by frame inside the browser, please use the separate WebViewer Video get started guide.

Prerequisites

Node.js is not required for WebViewer
WebViewer does not require Node, npm, or node_modules. It is only recommended to run the samples.
  • WebViewer package (contains library and samples):

No trial license key required.
The trial of Apryse SDK works without a license key. A commercial license key is required for use in a production environment. Please fill out our licensing form if you do not have a valid license key.
Keep your commercial license key confidential.
License keys are uniquely generated. Please make sure that it is not publicly available (e.g. in your public GitHub).

Integrate into your application

  1. 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:
    npm install -g http-server
    • You can now start the server by executing:
    http-server -a localhost

    The server will be hosted on http://localhost:8080.

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

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

    <!DOCTYPE html>
<html>
<head>
  <title>Basic WebViewer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>

<!-- Import WebViewer as a script tag -->
<script src='WebViewer/lib/webviewer.min.js'></script>

<body>
  <div id='viewer' style='width: 1024px; height: 600px; margin: 0 auto;'></div>
</body>
</html>
To import WebViewer as a CommonJS module, see this section .
  1. Next to instantiate WebViewer, add this script to the body after the viewer div declaration from the previous step: 
    <script>
  WebViewer({
    path: 'WebViewer/lib', // path to the Apryse 'lib' folder on your server
    licenseKey: 'Insert commercial license key here after purchase',
    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf',
    // initialDoc: '/path/to/my/file.pdf',  // You can also use documents on your server
  }, document.getElementById('viewer'))
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;

    // call methods from instance, documentViewer and annotationManager as needed

    // you can also access major namespaces from the instance as follows:
    // const Tools = instance.Core.Tools;
    // const Annotations = instance.Core.Annotations;

    documentViewer.addEventListener('documentLoaded', () => {
      // call methods relating to the loaded document
    });
  });
</script>
For resources on how to use more of our WebViewer API, check our usage guide  and API.

  1. Make sure your server is up and running. If you are using the server option from step 3,  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:
manual-integration
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.
npm install PATH_TO_WEBVIEWER/lib
Then use the following import statement in your JavaScript file.
import WebViewer from 'webviewer';
// import Apryse instead of WebViewer for 4.0 ~ 5.0
Next step
Usage Guides Samples API docs
Get the answers you need: Support