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.

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.

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

• Integrate via NPM
• Manual Integration

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.

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

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:

(async function() {
  // Core namespace is now available on the window
  // Using absolute path
  Core.setWorkerPath('/PATH_TO_WEBVIEWER/lib/core');

  // or could use relative path
  Core.setWorkerPath('./PATH_TO_WEBVIEWER/lib/core');
})()

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

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

(async function() {
  Core.setWorkerPath('/PATH_TO_WEBVIEWER/lib/core');

  const documentViewer = new Core.DocumentViewer();

  // Hook up the DocumentViewer object to your own elements
  documentViewer.setScrollViewElement(document.getElementById('scroll-view'));
  documentViewer.setViewerElement(document.getElementById('viewer'));

  // Load your document
  documentViewer.loadDocument('path/to/document.pdf', { l: licenseKey });
})()

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

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

Use PDFNet APIs

(function() {
  Core.setWorkerPath('/PATH_TO_WEBVIEWER/lib/core');

  async function main() {
    // creates an empty pdf document (PDFDoc)
    const doc = await PDFNet.PDFDoc.create();
    doc.initSecurityHandler();
    // Locks all operations on the document
    doc.lock();

    // insert user code after this point
    const pgnum = await doc.getPageCount();
    alert(`Test Complete! Your file has ${pgnum} pages`);
  };

  PDFNet.runWithCleanup(main, /* License key goes here after purchase */)
})()

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