Some test text!

Integrate into your app

Contents

Import WebViewer
Instantiate
Run locally

linkDownload

If you haven't already, download and unzip WebViewer.zip.

A trial key is needed to use and download Webviewer.

Get Your Free Trial License Key

linkImport WebViewer

To import WebViewer, you can either import is as a script tag:

<script src='PATH_TO_WEBVIEWER/lib/webviewer.min.js'></script>

or as a CommonJS module:

npm install PATH_TO_WEBVIEWER/lib
import PDFTron from 'webviewer';

linkInstantiate

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
    // viewerInstance.someAPI();
  });
</script>
Notice that we also added a ready event listener to ensure that the viewer is ready before we start calling any APIs. To call APIs related to document, however, you must listen to documentLoaded event instead.

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.

Get the answers you need: Support

Contents

Import WebViewer
Instantiate
Run locally