Some test text!

keyboard_arrow_down

Getting started

keyboard_arrow_down

Deployment options

keyboard_arrow_down

Webviewer Server

keyboard_arrow_down

Fundamentals

keyboard_arrow_down

Basics

keyboard_arrow_down

Annotations

keyboard_arrow_down

UI

keyboard_arrow_down

Legacy UI

keyboard_arrow_down

Advanced

keyboard_arrow_down

PDFNetJS Full

keyboard_arrow_down

PDF Processing API

Download and Integrate

In this document
chevron_rightIntegrate
chevron_rightCopy files
chevron_rightInitialize
chevron_rightRun locally
chevron_rightNext steps

linkDownload

A trial key is needed to use Webviewer.

Get Your Free Trial License Key

linkIntegrate

linkCopy files

Copy the WebViewer lib folder into your project. Copying to a static or public folder is recommended.

Your file structure may look something like this:

- index.html
- static/
  - lib/
    - ...(PDFTron files)

linkInitialize

First, import the dependency into the <head> of your project:

<script src='/static/lib/webviewer.min.js'></script>
If you don't want to use script tags to import Webviewer, check out our other integration options

Initialize Webviewer by creating a new Webviewer instance. You will need to pass a DOM element to the constructor, so make sure to call the constructor after the DOM is ready (putting the script at the bottom of the <body> ensures this for you).

Add the following code to the <body>:

<div id='viewer' style='width: 1024px; height: 600px;'></div>
<script>
  var viewerElement = document.getElementById('viewer');
  var myWebViewer = new PDFTron.WebViewer({
    path: '/static/lib', // path to the PDFTron 'lib' folder on your server
    l: 'YOUR_LICENSE_KEY_HERE',
    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
  }, viewerElement);

  // We need to wait for the viewer to be ready before we can use any APIs
  viewerElement.addEventListener('ready', function() {
    var viewerInstance = myWebViewer.getInstance(); // instance is ready here

    // Call APIs here
  });
</script>
Notice that we also added a 'ready' event listener. We add this to ensure that the viewer is ready before we start interacting with its APIs. You can view all the available events here.

linkRun locally

If you do not have a local development environment set up, there are a few easy ways to get up and running very quickly. Check out this guide to learn more.

linkNext steps

We recommend implementing some basic functionality to help learn the basics of WebViewer.

You can also: