Getting started with UI beta

In this document
chevron_rightInstantiating
chevron_rightLoading a document
chevron_rightFull example

WebViewer now comes with a new modern UI. Built in React, the new UI has been designed to be easier to use and more customizable.

WebViewer UI (beta) is

  • dynamic, meaning you can modify or trigger UI actions on fly.
  • responsive, meaning the layout auto-adjusts to device's screen size.

Downloading and integrating

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.

After downloading and extracting, move the webviewer-ui-beta folder to your project's root directory. Then, add the dependencies to your HTML page:

<script src='webviewer-ui-beta/res/libs/jquery-3.2.1.min.js'></script>
<script src='webviewer-ui-beta/res/libs/webviewer.min.js'></script>

Instantiating

const viewerElement = document.getElementById('viewer');
const viewer = new PDFTron.WebViewer({
  l: 'YOUR_LICENSE_KEY',
  path: 'webviewer-ui-beta',
  ui: 'beta'
}, viewerElement);

To see more available options, see WebViewer constructor options.

Loading a document

viewerElement.on('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.loadDocument('path/to/document.pdf');
  // or 'https://some-website.com/path/to/document.pdf'
});

Full example

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>My WebViewer example</title>
  <script src='webviewer-ui-beta/res/libs/jquery-3.2.1.min.js'></script>
  <script src='webviewer-ui-beta/res/libs/webviewer.min.js'></script>
</head>
<body>
  <div id='viewer' style='width:700px;height:700px;border:1px solid black'></div>
  <script src='example.js'></script>
</body>
// example.js
const viewerElement = document.getElementById('viewer');
const viewer = new PDFTron.WebViewer({
  l: 'YOUR_LICENSE_KEY',
  path: 'webviewer-ui-beta',
  ui: 'beta'
}, viewerElement);

$(viewerElement).on('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.loadDocument('/path/to/document.pdf');
});