Section:

Build UI-free document processing workflows with Apryse WebViewer SDK

This guide shows how to use the Apryse WebViewer SDK for headless, programmatic document processing without rendering the WebViewer UI. This approach is useful when you need to process, convert, or inspect documents directly in your application, or build automated document workflows.

The examples use a simple HTML‑based project to focus on core SDK functionality without UI components. By the end, you’ll be able to:

  • Count the number of pages in a PDF.
  • Convert a DOCX file to PDF and automatically download it.

Prerequisites

Before you start:

  • Install Node.js and npm. We recommend using the latest active LTS release.
  • Install Visual Studio Code or another code editor to develop and debug your code.
  • 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.

1. Create your project

Set up your project by creating a folder and preparing a workspace for building document‑processing workflows with the Apryse WebViewer SDK.

  1. In your terminal, go to the directory where you want to create the project.
  2. Create a new project folder and move to it so you can start working with it:

Shell

1mkdir webviewer-no-ui
2cd webviewer-no-ui

2. Download WebViewer

In this step, you’ll manually download the WebViewer package and add it to your project.

  1. Download the WebViewer package, which includes the library files, samples, and documentation.
  2. Extract the downloaded WebViewer.zip file into the webviewer-no-ui project folder. Your project structure should look similar to this:

Text

1webviewer-no-ui/
2└── WebViewer/
3    ├── doc/
4    ├── lib/
5    ├── licenses/
6    ├── samples/
7    ├── scripts/
8    ├── package.json
9    └── server.js

3. Create the PDF viewer

In this section, you’ll add a minimal HTML structure and the JavaScript required to run document processing tasks with the Apryse WebViewer SDK. In this headless setup, only the core SDK scripts are loaded, and document workflows are handled entirely through code rather than a full viewer UI.

  1. Open the webviewer-no-ui folder in Visual Studio Code.
  2. Create a new index.html file in the webviewer-no-ui folder.
  3. Add the following HTML to the index.html file:

HTML

index.html

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>Basic WebViewer</title>
6    <meta
7      name="viewport"
8      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9    />
10    
11    <!-- Load WebViewer Core SDK (no UI components) -->
12    <script src="./WebViewer/lib/core/webviewer-core.min.js"></script>
13    <!-- Use PDFNetLean.js when advanced PDFNet features aren't required -->
14    <!-- <script src="./lib/core/pdf/PDFNetLean.js"></script> -->
15    <script src="./WebViewer/lib/core/pdf/PDFNet.js"></script>
16  </head>
17
18  <body>
19    <h1>Working without a viewer</h1>
20    <p>Add query params as a verb and the URL of the file to be processed</p>
21    <!-- Example query parameters for document processing -->
22    <!-- Use to trigger and test each workflow -->
23    <ul>
24      <li>Count pages: ?countpages=https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf</li>
25      <li>Convert to PDF: ?convert=https://pdftron.s3.amazonaws.com/downloads/pl/report.docx</li>
26    </ul>
27  </body>
28
29</html>

Info

WebViewer Core provides the foundation for WebViewer functionality. In a typical UI setup, you would include the webviewer.min.js script. In a headless (no‑UI) scenario, you only need to load the core libraries: webviewer-core.min.js and PDFNet.js.

If you don’t require advanced PDFNet functionality, you can use the lighter PDFNetLean.js script instead. It has a smaller footprint, loads faster, and includes the essential PDFNet features without requiring the full API. For this guide, we use the full PDFNet.js library for consistency, though it's not required.

4. Add the following JavaScript to your index.html file, placing it before the closing </body> tag:

JavaScript

index.html

1<script>
2  // Set path to WebViewer Core worker files
3  // Allow PDFNet to load Web Worker scripts for document processing
4  Core.setWorkerPath('./WebViewer/lib/core');
5
6  // Create entry point for all no viewer SDK operations
7  async function main() {
8    // Get current page URL and extract query parameters
9    const currentPageURL = new URL(window.location.href);
10    const params = new URLSearchParams(currentPageURL.search);
11
12    // Check for 'countpages' parameter
13    // Load PDF from URL, create PDFDoc instance
14    // Retrieve and display page count
15    if (params.has('countpages')) {
16      const inputURL = params.get('countpages');
17      const doc = await Core.PDFNet.PDFDoc.createFromURL(inputURL);
18      doc.initSecurityHandler();
19      // Lock document to ensure safe operations
20      doc.lock();
21      const pageCount = await doc.getPageCount();
22      alert(`Your file has ${pageCount} pages`);
23    }
24
25   // Check for 'convert' parameter
26   // Convert DOCX from URL to PDF using office2PDF
27   // Return PDFDoc object and download it
28    else if (params.has('convert')) {
29      const inputURL = params.get('convert');
30
31      Core.PDFNet.Convert.office2PDF(inputURL).then(async (outPdfDoc) => {
32        const pageCount = await outPdfDoc.getPageCount();
33        console.log(`Converted DOCX to PDF with ${pageCount} pages`);
34        const outputPath = 'output.pdf';
35
36        // Export PDF as blob for download
37        // Refactor into utility function if preferred
38        const pdfData = await outPdfDoc.saveMemoryBuffer(Core.PDFNet.SDFDoc.SaveOptions.e_linearized);
39        const blob = new Blob([pdfData], {type: 'application/pdf'});
40
41        // Trigger download
42        const a = document.createElement('a');
43        a.href = URL.createObjectURL(blob);
44        a.download = outputPath;
45        a.click();
46      });
47    }
48  }
49
50  // Initialize PDFNet and run main function
51  // Replace with your Apryse license key
52  Core.PDFNet.runWithCleanup(main, 'YOUR_LICENSE_KEY');
53</script>

Related Links

5. Save the index.html file.

4. Verify your output

Once your project files are in place, serve the webpage so that the Apryse WebViewer SDK can load and run document-processing tasks in the browser. This allows you to verify that your setup is working correctly. We use http-server to preview the page locally in your browser.

1. From your project directory, run the following command to start a local web server:

Shell

1npx http-server -a localhost

If prompted, press y to install http-server. A successful output looks similar to:

Shell

1Starting up http-server, serving ./
2
3http-server version: 14.1.1
4
5http-server settings: 
6CORS: disabled
7Cache: 3600 seconds
8Connection Timeout: 120 seconds
9Directory Listings: visible
10AutoIndex: visible
11Serve GZIP Files: false
12Serve Brotli Files: false
13Default File Extension: none
14
15Available on:
16  http://localhost:8080

2. Open the localhost URL from your terminal to view the project in your browser.

3. Paste this URL into your browser to see an alert showing the PDF's page count, then load the page:

Text

1http://localhost:8080/?countpages=https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf

4. Paste this URL into your browser to convert the DOCX file to PDF and automatically download the result, then load the page:

Text

1http://localhost:8080/?convert=https://pdftron.s3.amazonaws.com/downloads/pl/report.docx

Get started video

In this 6-minute video, learn how to integrate the Apryse WebViewer SDK into your application and build document-processing workflows without a viewer interface.

Integrate the WebViewer SDK without the UI to build document-processing workflows.

Next steps

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales