Section:

Use JavaScript PDF Document Processing SDK without UI

Although WebViewer provides a UI to view and annotate documents, it also provides access to Apryse's SDK that allows you to perform document operations without a UI if necessary.

This is useful for areas of your app that needs additional document processing without viewing a document. Although there are performance drawbacks as this is done on the client-side, it can be critical as part of your app's flow.

Prerequisites

This guide assumes you will have downloaded WebViewer and at least set up your project to serve the static library files.

Get your Apryse trial key.

License Key

Apryse collects some data regarding your usage of the SDK for product improvement.

If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.

If you have not done so, please check out one of the following guides to get started:

Integrate into your application

1. Importing WebViewer Core

WebViewer Core is the core for WebViewer. The usual script that would be required with the UI is webviewer.min.js. Using this script would automatically import and use the core. In a viewer-less scenario, we would only import the core script (webviewer-core.min.js; CoreControls.js prior to WebViewer 8.0) in the HTML. As of 10.1, we also import PDFNetLean.js here to include functions that come from PDFNet.js, but do not require fullAPI.

HTML

1<script src="/PATH_TO_WEBVIEWER/lib/core/webviewer-core.min.js">
2<script src="/PATH_TO_WEBVIEWER/lib/core/pdf/PDFNetLean.js">

2. Setting the worker path

WebViewer requires web workers to function and work with documents. This is necessary regardless of the setup. Normally, this is done automatically via the path option in the WebViewer constructor. In a viewer-less scenario, we can load the workers with a simple JavaScript call:

1(async function() {
2  // Core namespace is now available on the window
3  // Using absolute path
4  Core.setWorkerPath('/PATH_TO_WEBVIEWER/lib/core');
5
6  // or could use relative path
7  Core.setWorkerPath('./PATH_TO_WEBVIEWER/lib/core');
8})()

Related Links

3. Usage

Once the workers are ready, everything is in place to use the APIs and classes in the Core namespace.

Building a custom UI

One special use case would be to create your own UI by leveraging the DocumentViewer class and object.

1(async function() {
2  Core.setWorkerPath('/PATH_TO_WEBVIEWER/lib/core');
3
4  const documentViewer = new Core.DocumentViewer();
5
6  // Hook up the DocumentViewer object to your own elements
7  documentViewer.setScrollViewElement(document.getElementById('scroll-view'));
8  documentViewer.setViewerElement(document.getElementById('viewer'));
9
10  // Load your document
11  documentViewer.loadDocument('path/to/document.pdf', { l: licenseKey });
12})()

Related Links

You can check out the full guide on how to build your own UI .

Processing documents (Full API - PDFNet)

Another use case is to use the APIs to process documents in the client (browser). To gain access to the full API for more advanced document processing, there are a few additional steps to take:


Reference an additional script (PDFNet.js) in your HTML

HTML

1<script src="/PATH_TO_WEBVIEWER/lib/core/pdf/PDFNet.js">

Use PDFNet APIs

1(function() {
2  Core.setWorkerPath('/PATH_TO_WEBVIEWER/lib/core');
3
4  async function main() {
5    // creates an empty pdf document (PDFDoc)
6    const doc = await PDFNet.PDFDoc.create();
7    doc.initSecurityHandler();
8    // Locks all operations on the document
9    doc.lock();
10
11    // insert user code after this point
12    const pgnum = await doc.getPageCount();
13    alert(`Test Complete! Your file has ${pgnum} pages`);
14  };
15
16  PDFNet.runWithCleanup(main, /* License key goes here after purchase */)
17})()

Related Links

Next step

From here, you can build a fully custom UI or work more with the PDFNet APIs.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales