Section:

Integrate WebViewer into a jQuery Content Delivery Network (CDN)

Using a Vanilla JavaScript app, WebViewer is instantiated in an app.js application. The component is able to view, annotate, and manipulate PDFs and other documents.

The sample also shows how to call methods from the docViewer and annotManager objects in the instance. As well as how to access other Apryse namespaces such as Tools and Annotations.

Additionally, it demonstrates how to programmatically set the Dark Theme in the viewer.

jQuery commands are then used in the sample to retrieve this JS app and deliver the content to a locally hosted server.

WebViewer provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.

Click the button below to view the full project in GitHub.

1/* eslint-disable-next-line no-undef */
2WebViewer({
3  path: 'lib', // path to the Apryse 'lib' folder on your server
4  // licenseKey: 'Insert commercial license key here after purchase',
5  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
6  // initialDoc: '/path/to/my/file.pdf',  // You can also use documents on your server
7}, document.getElementById('viewer'))
8  .then(function(instance) {
9    const { documentViewer, annotationManager } = instance.Core;
10    // call methods from instance, documentViewer and annotationManager as needed
11
12    // you can also access major namespaces from the instance as follows:
13    // const Tools = instance.Core.Tools;
14    // const Annotations = instance.Core.Annotations;
15
16    // change to dark theme
17    const theme = instance.UI.Theme;
18    instance.UI.setTheme(theme.DARK);
19
20    documentViewer.addEventListener('documentLoaded', function() {
21    // call methods relating to the loaded document
22    });
23  });
24/*eslint no-unused-vars: "warn"*/

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales