Some test text!

Loading...
Guides
Run without viewer

Run without Viewer

Although WebViewer provides a UI to view and annotate documents, it also provides access to PDFTron's PDFNet 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.

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

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.

<script src="/PATH_TO_WEBVIEWER/lib/core/webviewer-core.min.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:

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

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.

(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 });
})()
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:


  1. Reference an additional script (PDFNet.js) in your HTML
<script src="/PATH_TO_WEBVIEWER/lib/core/pdf/PDFNet.js">
  1. 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 */)
})()

Next step

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

Get the answers you need: Support

Upcoming Webinar: Customer Experience and Retaining Control: Boosting Document Automation and Efficiency in Financial Services | Sept 15, 2022 at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use