Some test text!

Loading...
Guides
Manual integration

Manually integrating WebViewer

This guide will show you how to get started with the WebViewer SDK through manual installation. By the end of this guide, you should be able load WebViewer into any app. This is the guide for you if you are looking to add WebViewer outside of a package manager.

If you require an added capability for annotating mp4, webm, and ogg videos frame by frame inside the browser, please use the separate WebViewer Video get started guide.

Prerequisites

Node.js is not required for WebViewer
WebViewer does not require Node, npm, or node_modules. It is only recommended to run the samples.
  • WebViewer package (contains library and samples):

No trial license key required.
The trial of PDFTron SDK works without a license key. A commercial license key is required for use in a production environment. Please fill out our licensing form if you do not have a valid license key.
Keep your commercial license key confidential.
License keys are uniquely generated. Please make sure that it is not publicly available (e.g. in your public GitHub).

Integrate into your application

  1. To start, we need a server environment ready. If you do not have a server, follow these steps:

    • Create a folder for your project. This guide will assume your project is called myServer.
    • Open a terminal in that folder and execute:
    npm install -g http-server
    • You can now start the server by executing:
    http-server -a localhost

    The server will be hosted on http://localhost:8080.

  2. Extract the WebViewer package (WebViewer.zip) into your project directory (/myServer).

  3. Create a new index.html webpage in the same project directory and paste this inside:

    <!DOCTYPE html>
    <html>
    <head>
      <title>Basic WebViewer</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    </head>
    
    <!-- Import WebViewer as a script tag -->
    <script src='WebViewer/lib/webviewer.min.js'></script>
    
    <body>
      <div id='viewer' style='width: 1024px; height: 600px; margin: 0 auto;'></div>
    </body>
    </html>
To import WebViewer as a CommonJS module, see this section .
  1. Next to instantiate WebViewer, add this script to the body after the viewer div declaration from the previous step:
    <script>
      WebViewer({
        path: 'WebViewer/lib', // path to the PDFTron 'lib' folder on your server
        licenseKey: 'Insert commercial license key here after purchase',
        initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf',
        // initialDoc: '/path/to/my/file.pdf',  // You can also use documents on your server
      }, document.getElementById('viewer'))
      .then(instance => {
        const { documentViewer, annotationManager } = instance.Core;
    
        // call methods from instance, documentViewer and annotationManager as needed
    
        // you can also access major namespaces from the instance as follows:
        // const Tools = instance.Core.Tools;
        // const Annotations = instance.Core.Annotations;
    
        documentViewer.addEventListener('documentLoaded', () => {
          // call methods relating to the loaded document
        });
      });
    </script>
For resources on how to use more of our WebViewer API, check our usage guide and API.
  1. Make sure your server is up and running. If you are using the server option from step 3, open http://localhost:8080/index.html on your browser. If you already have the page open, refresh the page. You should see WebViewer start up:

manual-integration

Import as a module

You can also import WebViewer as a CommonJS module when installed manually. It is recommended to install via npm if you have the option.

First, install the module.

Replace PATH_TO_WEBVIEWER with the path from your package.json file to the WebViewer lib folder.
npm install PATH_TO_WEBVIEWER/lib

Then use the following import statement in your JavaScript file.

import WebViewer from 'webviewer';
// import PDFTron instead of WebViewer for 4.0 ~ 5.0

Next step

Usage Guides Samples API docs

Get the answers you need: Support

Upcoming Webinar: SDK Features Preview and Live Run-Through | July 14, 2022 at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use