Some test text!

keyboard_arrow_down

Getting started

keyboard_arrow_down

Deployment options

keyboard_arrow_down

Fundamentals

keyboard_arrow_down

Basics

keyboard_arrow_down

Annotations

keyboard_arrow_down

UI

keyboard_arrow_down

Legacy UI

keyboard_arrow_down

Advanced

keyboard_arrow_down

PDFNetJS Full

keyboard_arrow_down

PDF Processing API

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:

You can also refer to the constructor options that WebViewer provides.

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