Some test text!

Download and Integrate

In this document
chevron_rightCopy files
chevron_rightRun locally
chevron_rightNext steps


A trial key is needed to use and download Webviewer.

Get Your Free Trial License Key


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)


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>
  var viewerElement = document.getElementById('viewer');
  var myWebViewer = new PDFTron.WebViewer({
    path: '/static/lib', // path to the PDFTron 'lib' folder on your server
    initialDoc: '', 
    // 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
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: