Some test text!

Integrate into your project

In this document
chevron_rightAs a script tag
chevron_rightAs a CommonJS module
chevron_rightAs an AMD module

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>

To import WebViewer into your project, you can choose one of the three options:

linkAs a script tag

  1. Copy the WebViewer lib folder to your project, and add the dependencies to the <head> of your HTML page.
<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',
    initialDoc: 'http://MY_DOC_SERVER.com/MY_FILE.pdf', // replace with your own PDF file
    pdftronServer: 'https://demo.pdftron.com' // replace later with your own server
  }, viewerElement);
</script>

linkAs a CommonJS module

  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',
  initialDoc: 'http://MY_DOC_SERVER.com/MY_FILE.pdf', // replace with your own PDF file
  pdftronServer: 'https://demo.pdftron.com' // replace later with your own server
}, 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.

linkAs 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'
  }
});

require(['pdftron'], function(PDFTron) {
  var viewerElement = document.getElementById('viewer');
  var myWebViewer = new PDFTron.WebViewer({
    path: 'scripts/libs/WebViewer',
    l: 'YOUR_LICENSE_KEY_HERE',
    initialDoc: 'http://MY_DOC_SERVER.com/MY_FILE.pdf', // replace with your own PDF file
    pdftronServer: 'https://demo.pdftron.com' // replace later with your own server
  }, viewerElement);
});