Some test text!

menu
Manual integrationkeyboard_arrow_down

Get started integrating WebViewer manually

Welcome to PDFTron. This guide will show you how to get started with a free trial of the WebViewer SDK by running samples and using it to display a simple WebViewer element on a local HTTP server. Your free trial includes unlimited trial usage and support from solution engineers.

linkPrerequisites

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:

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).

linkRun samples

  1. Extract WebViewer.zip and navigate to the extracted WebViewer folder and install the required dependencies to run the samples by executing:
npm install
  1. Next run the samples by executing:
npm start

You should see a message that reads

Listening at localhost:XXXX

where XXXX is the port the samples are using.

  1. Navigate to localhost:XXXX and you will be taken to the page with the samples. You can run and browse the source code of these samples freely.

Samples

linkIntegrate 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.
    • Navigate to that folder and execute
    npm install -g http-server

    You can now start the server by executing

    http-server -a localhost

    and the server will be hosted on http://localhost:8080

  2. If you haven't already done so, download and extract WebViewer

    Move the extracted WebViewer folder into your project directory (/myServer).

  3. Once you have your server, create a new html webpage in the same project directory. Call it index.html and paste this inside:

    <!DOCTYPE html>
    <html>
    <head>
      <title>Basic WebViewer</title>
    </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 in body after the viewer div declaration:

    <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 docViewer = instance.docViewer;
        const annotManager = instance.annotManager;
        // call methods from instance, docViewer and annotManager as needed
    
        // you can also access major namespaces from the instance as follows:
        // const Tools = instance.Tools;
        // const Annotations = instance.Annotations;
    
        docViewer.on('documentLoaded', () => {
          // call methods relating to the loaded document
        });
      });
    </script>
  2. 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

linkUse more WebViewer APIs

  • To use more WebViewer APIs, you can add the API calls in the callback of the WebViewer constructor. For example, to change the theme of WebViewer to dark, you can add:

    .then(instance => {
      const { docViewer, annotManager } = instance;
      // call methods from instance, docViewer and annotManager as needed
      + instance.setTheme('dark');
      ...

    Refresh your application page (http://localhost:8080/index.html) and you should see the theme has changed:

    Dark theme

For resources on how to use more of our WebViewer API, check out the WebViewer guides and API.

linkImport as a module

You can also import WebViewer as a CommonJS module.

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

linkNext step

GuidesSamplesAPI docs

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.