Integrating jQuery with WebViewer JavaScript PDF library

This guide will help you integrate a free trial of WebViewer into a jQuery applications from scratch. It will help you clone the jQuery sample repository, walk through the project structure, and show you how to call other WebViewer API. Your free trial includes unlimited trial usage and support from solution engineers.

Prerequisites

Node.js and npm

Node.js is not required for WebViewer

WebViewer does not require Node, npm, or node_modules. It is only recommended to run the 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).

Initial setup

Clone the jQuery sample

by executing

```git

git clone https://github.com/PDFTron/webviewer-jquery-sample.git
```

Once cloned, navigate into the webviewer-jquery-sample directory and install all the required dependencies by executing
```
npm install
```

npm will also download the PDFTron WebViewer and extract it to /src/lib.

You are now ready to run the sample or use more WebViewer APIs.

Sample overview

After initial setup, the webviewer-jquery-sample directory should be laid out like this:

webviewer-jqeury-sample
├── CONTRIBUTING.md
├── LICENSE
├── node_modules
│   └── ...
├── package.json
├── README.md
├── app
│    ├── index.html
|    ├── app.js
│    ├── lib
│    │   ├── ui
│    │   │   ├── ...
│    │   ├── core
│    │   │   ├── ...
│    │   └── webviewer.min.js
│    └── ...
└── ...

Notable files and directories include:

File/Folder Name	Description
LICENSE	Lists the PDFTron copyright and license information.
files	Contains the sample PDF for the application
lib	Contains the extracted WebViewer SDK
index.html	Contains the main layout for the application
app.js	Contains the code for the main application, includes WebViewer instantiation as well as the 'documentLoaded' callback

In short, app.js instantiates WebViewer and sets up some example event handlers. WebViewer is presented on the page.

Run the sample

To run the sample, navigate to your webviewer-jquery-sample/ directory and execute

npm start

Then navigate to http://localhost:3000. You should see the application load on your browser.

Dark theme

Use more WebViewer APIs

To call more WebViewer API's, navigate to /src/app/app.js and add the API calls in the callback of the WebViewer constructor (you may need to make one if it is not provided).

WebViewer({
    path: '../lib',
    initialDoc: '../files/webviewer-demo-annotated.pdf'
}, document.getElementById('viewer'))
    .then(instance => {
        // In this callback WebViewer will be initialized, so you can call WebViewer API here.
        instance.UI.setTheme('light');
    });

If your jQuery application is already running, you should see the theme change by refreshing the page. Otherwise execute npm start again, then navigate to http://localhost:3000 and you should see that the theme has changed.

manual-integration