Download and integrate into your project

In this document
chevron_rightAs a script tag
chevron_rightAs an AMD module
chevron_rightTroubleshooting
If you have not yet received a trial license key, please obtain one before proceeding. Then, visit this page via the included link in your trial license key email.

Getting started on the server

While it is not required to use WebViewer, PDFTron now offers a fully integrated server component. See PDFTron Server for setup information.

Getting started client-side

Note because of browser security restrictions you will not be able to run WebViewer from the file system. Instead you can run it from a local server, or use the PDFTron integrated server.
  1. In your HTML you'll need to add an element that WebViewer will be contained in:
<div id='viewer' style='width: 1024px; height: 600px;'></div>
  1. WebViewer is distributed as a UMD module which allows it to be used with a script tag or as a CommonJS or AMD module.

As a script tag

  1. Copy the WebViewer lib folder to your project, and add the dependencies to the <head> of your HTML page.
<!-- jQuery must be added before WebViewer.js -->
<script src='lib/html5/external/jquery-3.2.1.min.js'></script>
<script src='lib/WebViewer.min.js'></script>
  1. Add the following code to the HTML <body> after the #viewer div. The initialDoc option should be the path to one of your documents.
<div id='viewer' style='width: 1024px; height: 600px;'></div>
<script>
  var viewerElement = document.getElementById('viewer');
  var myWebViewer = new PDFTron.WebViewer({
    path: 'lib',
    l: 'YOUR_LICENSE_KEY_HERE',
    // replace with your own PDF file
    initialDoc: 'YOUR_FILE.pdf'
  }, viewerElement);
</script>

See the troubleshooting section if you're having trouble loading a document.

As a CommonJS module

  1. Include jQuery as a script tag before your bundle.
<script src='libs/WebViewer/html5/external/jquery-3.2.1.min.js'></script>
<script src='bundle.js'></script>
  1. Copy the WebViewer lib folder to your libs folder and rename it to WebViewer.

  2. Add pdftron as a local dependency in your package.json:

{
  ...
  'dependencies': {
    'pdftron': 'file:libs/WebViewer'
  }
}
  1. Import PDFTron into your project.
import PDFTron from 'pdftron';

var viewerElement = document.getElementById('viewer');
var myWebViewer = new PDFTron.WebViewer({
  path: 'libs/WebViewer',
  l: 'YOUR_LICENSE_KEY_HERE',
  // replace with your own PDF file
  initialDoc: 'YOUR_FILE.pdf'
}, viewerElement);
The WebViewer folder will need to be copied to your dist folder (or wherever your build outputs to) so that the WebViewer module can access it.

See troubleshooting section if you're having trouble loading a document.

As an AMD module

  1. Copy the WebViewer lib folder to your libs folder and rename it to WebViewer.

  2. In your main script add the following code:

require.config({
  paths: {
    pdftron: 'libs/WebViewer/WebViewer.min',
    jquery: 'libs/WebViewer/html5/external/jquery-3.2.1.min'
  }
});

require(['pdftron'], function(PDFTron) {
  var viewerElement = document.getElementById('viewer');
  var myWebViewer = new PDFTron.WebViewer({
    path: 'scripts/libs/WebViewer',
    l: 'YOUR_LICENSE_KEY_HERE',
    // replace with your own PDF file
    initialDoc: 'YOUR_FILE.pdf'
  }, viewerElement);
});

Troubleshooting

If you're getting 404's for ReaderControl.html try adjusting the path option in the PDFTron.WebViewer constructor so that it points to the location of your lib folder.

If you're still running into problems try looking through the troubleshooting page.