Integrate into your project

In this document
chevron_rightGetting started
chevron_rightAs a script tag
chevron_rightAs an AMD module
chevron_rightTroubleshooting

linkGetting started

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>

WebViewer is distributed as a UMD module which allows it to be used with a script tag or as a CommonJS or AMD module.

linkAs 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',
    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>

linkNext Steps

  • To quickly build a proof of concept you can use demo.pdftron.com as your server backend (you can seamlessly switch over to your own server later).
  • To host our server container yourself, replace demo.pdftron.com with the URL for your server backend. See the guide for more information.
  • To configure your own server (and not use our packaged backend), see our custom server guide.
  • To use a pure client-side approach without a server backend, see our client only guide.

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

Note that demo.pdftron.com should only be used for demonstration purposes and shouldn't be used in production as documents are uploaded to PDFTron's servers. Make sure to change the pdftronServer option to point to your own server in production. See our privacy policy for more information.

linkAs 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',
  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.

linkNext Steps

  • To quickly build a proof of concept you can use demo.pdftron.com as your server backend (you can seamlessly switch over to your own server later).
  • To host our server container yourself, replace demo.pdftron.com with the URL for your server backend. See the guide for more information.
  • To configure your own server (and not use our packaged backend), see our custom server guide.
  • To use a pure client-side approach without a server backend, see our client only guide.

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

Note that demo.pdftron.com should only be used for demonstration purposes and shouldn't be used in production as documents are uploaded to PDFTron's servers. Make sure to change the pdftronServer option to point to your own server in production. See our privacy policy for more information.

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

linkNext Steps

  • To quickly build a proof of concept you can use demo.pdftron.com as your server backend (you can seamlessly switch over to your own server later).
  • To host our server container yourself, replace demo.pdftron.com with the URL for your server backend. See the guide for more information.
  • To configure your own server (and not use our packaged backend), see our custom server guide.
  • To use a pure client-side approach without a server backend, see our client only guide.
Note that demo.pdftron.com should only be used for demonstration purposes and shouldn't be used in production as documents are uploaded to PDFTron's servers. Make sure to change the pdftronServer option to point to your own server in production. See our privacy policy for more information.

linkTroubleshooting

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.

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 WebViewer integrated server.

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

For additional server side processing, such as file conversions, see the PDFNet SDK pages for Linux and Windows.