Section:

Get Started with Apryse WebViewer SDK without Using the WebViewer UI

The Apryse WebViewer SDK delivers high-quality rendering, conversion, and document manipulation capabilities through a single, customizable component. Supporting PDF, Office, CAD, and images, it's fully featured out of the box, delivering great usability and functionality.

Adding WebViewer to your application allows users to view and edit PDFs without going outside of your application. This reduces reliance on third-party systems, multiple vendors, and file downloads for everyday tasks without compromising control, compliance, or security.

Interact with our showcase demo to test out all of the Apryse WebViewer SDK functionality.

WebViewer provides a UI to view and annotate documents, but it also provides access to Apryse's SDK which allows you to perform document operations without the UI. This is useful for areas of your app that need additional document processing without viewing a document.

Common use cases for performing document operations without the WebViewer UI include using it to:

  • Convert a file to PDF (most often an office file). Once converted you're able to get a converted pdf that can immediately be sent to storage with no need to do any of the conversion processing.
  • Count and display the number of pages in a PDF.
  • Create a custom viewer.
  • Generate thumbnails. Instead of keeping a number of thumbnails and images handy on your side to serve, you can instead create the thumbnails client-side on the fly as part of a preview mode that you can later click on to actually launch WebViewer with the UI.
  • Form-fill. You can pass in information via html forms, for example, then WebViewer, without the UI, fills in the PDF form. Next, it launches WebViewer with the UI and the fully completed PDF is ready to go.

This guide walks you through how to integrate the WebViewer SDK into your project without using the WebViewer UI. By the end, you'll be able to:

  • Count the pages of a PDF.
  • Create a custom viewer to display a PDF.
  • Convert a docx file into a PDF.

Get started video

Get started with the Apryse WebViewer SDK functionality without using the WebViewer UI. This video includes instructions for successfully integrating the WebViewer SDK into your application and building functionality without using the UI. You can also skip the video and, instead, follow the steps below to get started.

Use WebViewer functionality without using the UI

Prerequisites

Before you start:

  • Install Node and npm to run the local server.
  • Create a folder for your project.
  • Open a text editor like Visual Studio 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. Download WebViewer

Download the WebViewer package (contains library and samples).

2. Integrate WebViewer into your project

Extract the WebViewer package (WebViewer.zip) into your project folder. For this guide, we'll call our project folder without-viewer.

3. Add HTML

1. In your text editor, create a new index.html file in your without-viewer folder.

2. Paste the HTML below into the index.html file. A few essential things to take note of in the HTML page are that:

  • The HTMl is importing two scripts:
    • The first script specifies the source to the webviewer-core.min.js file.
    • The second script specifies the path to the PDFNet.js file. This file and the file mentioned in the bullet above were included in the zip file you extracted in Section 2 above.

If you're not going to use any of the advanced PDFNet functionality, you can use the PDFNetLean.js script instead. It's smaller and loads and runs more quickly. For this tutorial, we'll use the full PDFNet even though it's not required.

HTML

1<html>
2<head>
3  <title>Basic WebViewer</title>
4  <meta name="viewport" 
5      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6</head>
7<script src="./WebViewer/lib/core/webviewer-core.min.js"></script>
8<!-- If you aren't using the PDFNet functionality, then the lean script is fine -->
9<!-- <script src="./lib/core/pdf/PDFNetLean.js"></script> -->
10<script src="./WebViewer/lib/core/pdf/PDFNet.js"></script>
11
12<body>
13  <h1>Working without a viewer</h1>
14</body>
15
16</html>

WebViewer Core is the core for WebViewer. The usual script required with the UI is webviewer.min.js. In a viewless scenario though, you only need to import the core script, webviewer-core.min.js, and PDFNet.js. Alternatively, you can import PDFNetLean.js to include functions that come from PDFNet.js, but do not require fullAPI.

4. Add JavaScript code

Next, copy the block of code below, which includes HTML and JavaScript, into the index.html file you made. Add the code after the <h1>Working without a viewer</h1> heading and before the close body tag.

JavaScript

1  <p>
2    Add query params as a verb and the URL of the file to be processed</p>
3  <ul>
4    <li>Count pages: ?countpages=https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf</li>
5    <li>Create custom viewer: ?show=https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf</li>
6    <li>Convert to PDF: ?convert=https://pdftron.s3.amazonaws.com/downloads/pl/report.docx</li>
7  </ul>
8  <div id='scroll-view' style='max-height: 600px; height: 600px; width: 100%;'>
9    <div id='viewer'></div>
10  </div>
11  <script>
12    Core.setWorkerPath('./WebViewer/lib/core');
13    
14    async function main() {
15      const currentPageURL = new URL(window.location.href);  // Current page URL
16      const params = new URLSearchParams(currentPageURL.search);
17      
18      // Counts the pages of a PDF.
19      if (params.has("countpages")) {
20        const inputURL = params.get("countpages");
21        const doc = await Core.PDFNet.PDFDoc.createFromURL(inputURL);
22        doc.initSecurityHandler();
23        // Locks all operations on the document.
24        doc.lock();
25        
26        //Insert user code after this point.
27        const pageCount = await doc.getPageCount();
28        alert(`Your file has ${pageCount} pages`);
29      }
30      // Displays a custom viewer.
31      else if (params.has("show")) {
32        const inputURL = params.get("show");
33        const docViewer = new Core.DocumentViewer();
34        docViewer.setScrollViewElement(document.getElementById('scroll-view'));
35        docViewer.setViewerElement(document.getElementById('viewer'));
36        docViewer.loadDocument(inputURL);
37      }
38      //Converts a docx file to a PDF, counts the pages of the PDF, and downloads the PDF.
39      else if (params.has("convert")) {
40        const inputURL = params.get("convert");
41        
42        Core.PDFNet.Convert.office2PDF(inputURL).then(async (outPdfDoc) => {
43          const pageCount = await outPdfDoc.getPageCount();
44          console.log(`Converted DOCX to PDF with ${pageCount} pages`);
45          const outputPath = 'output.pdf';
46        
47          // Export the PDF as a blob so you can download it.
48          // You would probably refactor this into a utility function.
49          const pdfData = await outPdfDoc.saveMemoryBuffer(Core.PDFNet.SDFDoc.SaveOptions.e_linearized);
50          const blob = new Blob([pdfData], { type: 'application/pdf' });
51        
52          // Trigger a download.
53          const a = document.createElement('a');
54          a.href = URL.createObjectURL(blob);
55          a.download = outputPath;
56          a.click();
57        })
58      };
59    }
60    Core.PDFNet.runWithCleanup(main, "" /* License key goes here after purchase */)
61  </script>

Related Links

A few essential things to take note of about the code above include:

  1. The HTML piece includes text with some list items. These list items will help you towards the end of the tutorial to run and demo the get started tasks.
  2. There are two div elements, one named scroll-view and one named viewer.
  3. In Core.setWorkPath, specify the worker path which allows PDFNet to know where the functionality is that it will need to use within this program.
  4. Next, there's a main function that takes parameters from the URL and decides what to do with those URL parameters.
    1. If there's a parameter for countpages, it takes the URL and creates a PDF document from it. Then, it calculates the page count from the document and displays the count in an alert.
    2. If the parameter includes show, then it takes the URL and creates a custom document viewer. In this case, it uses the viewer actually built into WebViewer. You can use an alternative viewer if you prefer. Next, the divs for scroll-view and viewer are included, and loadDocument loads the document into the viewer.
    3. If the parameter includes convert, then it takes the URL, which is a docx file, and runs it through office2PDF. This returns a PDFDoc object. It then downloads the PDF object.
  5. Last, you pass in the name of the function, main, and your license key.

When the page loads, it will hit Core.PDFNET.runWithCleanup, call the main function, and complete what we listed above.

5. Run locally

After you've saved the file, you'll serve the webpage so you can see:

  • The page count display in an alert for the PDF.
  • The custom viewer with the PDF displayed.
  • The converted PDF (from a docx file) download.

Let's use http-server to view these actions.

1. Run the following command on the command line from your project directory to run http-server which is a simple web server.

2. Click the localhost link created in your terminal to view the the results locally.

sh

1npx http-server -a localhost

You'll see the HTML you wrote.

3. Copy the first URL, ?countpages=https://pdftron.s3.amazonaws.com/pl/demo-annotated.pdf, and paste it after localhost: 8080/ in the browser, then press Enter. An alert displays with the page count of the PDF.

Alert displaying with the total page count of the PDF

Alert displaying with the total page count of the PDF

4. Copy the second URL and paste it after localhost: 8080/ in the browser, then press Enter. You'll see the PDF display with a minimal viewer.

A minimal viewer displaying the PDF without the usual UI components like the ribbon

A minimal viewer displaying the PDF

5. Copy the third URL and paste it after localhost: 8080/ in the browser, then press Enter. You'll see the PDF version download.

Download icon is highlighted and downloads the converted PDF

The Download icon is highlighted which means it's downloading the converted PDF

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