How to integrate WebViewer into a JQuery PDF Viewer

This guide will show you how to integrate WebViewer Document Viewer & Editor into a jQuery application.

You can also download a ready-to-go sample on GitHub.

Prerequisites

Prior to starting, you should have already installed Node and npm.

Get your Apryse trial key.

---

Get started video

In this 4-minute video, learn the fundamentals of Apryse WebViewer, including key concepts for installation and initialization in any web application.

Overview of Apryse WebViewer fundamentals, including installation and initialization.

Get Started with the Sample

1. Clone the Sample

Clone the jQuery sample by executing

Shell

git clone --depth=1 https://github.com/ApryseSDK/webviewer-samples.git
cd webviewer-samples

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

Shell

npm install

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

2. Run the sample

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

Shell

npm start

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

3. Usage

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). Add your own license key in place of 'YOUR_LICENSE_KEY'.

JavaScript (SDK v8.0+)

WebViewer({
    path: '../lib',
    licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
    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');
    });

JavaScript (SDK v6.0+)

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

Next step

UsageGuidesSamplesAPI docs