HOW TO: Use the HTML5 DocumentViewer Without a Service

#1 Posted : Wednesday, May 1, 2019 4:24:50 PM(UTC)

Anthony Northrup

Groups: Registered, Tech Support, Administrators
Posts: 199

Was thanked: 28 time(s) in 28 post(s)

With our remaster in March 2019, we introduced the ability to use the HTML5 DocumentViewer without the DocumentService. The functionality is of course much more limited, but still supports things like annotations and PDF rendering. Below are all the details for getting a PDF to load in our HTML5 DocumentViewer without the need for a DocumentService.

Step 1: Disable the service interaction:

This can be achieved by simply setting the service configuration variables to null:

Code:

lt.Document.DocumentFactory.serviceHost = null;
lt.Document.DocumentFactory.servicePath = null;
lt.Document.DocumentFactory.serviceApiPath = null;
lt.Document.DocumentFactory.localProxyUrlTemplate = null;

Documentation for the properties mentioned above can be found here:
https://www.leadtools.com/help/sdk/dh/javascript/dox/documentfactory--properties.html

Step 2: Include/configure the PDF client-side rendering dependencies:

You'll need to add the following files to your index.html:

Code:

<script type="text/javascript" src="Scripts/Leadtools.Pdf.js"></script>
<script type="text/javascript" src="Scripts/Leadtools.Pdf.Worker.js"></script>

You'll then need to point to the character map files and web-worker, both included with our SDK:

Code:

PDFJS.cMapPacked = true;
PDFJS.cMapUrl = "Resources/Cmaps/";
PDFJS.workerSrc = "Scripts/Leadtools.Pdf.Worker.js";

Finally, add the compatibility helper which ensures different browsers behave identically. Again, this will go in your index.html file (after the above code):

Code:

<script type="text/javascript" src="Scripts/Leadtools.Pdf.Compatibility.js"></script>

Step 3: Enable client-side rendering:

This can be achieved by setting the following properties to true:

Code:

documentViewer.usePDFRendering = true;
documentViewer.usePDFText = true;

Additional information for the above properties can be found here:
https://www.leadtools.com/help/sdk/dh/javascript/doxui/documentviewer--properties.html

Step 4: Load a file:

With the addition of our serverless support, we've added the loadFromFile option to our DocumentFactory. This method allows you to load in a native File object (acquired from a file input) for viewing. Of course, there is still support for loading from a URL via the loadFromUri method. See both of the documentation pages below for more information about these different loading methods, as well as more in-depth sample code:

Important: When loading without a service, ensure you are configuring the loadMode of your LoadDocumentOptions object to be DocumentLoadMode.local:
https://www.leadtools.com/help/sdk/dh/javascript/dox/loaddocumentoptions-loadmode.html

Sample Project

Below is a complete sample application which demonstrates the serverless HTML5 DocumentViewer. Note: All of the files within the Resources directory were taken from our DocumentViewerDemo, included with our SDK.

File Attachment(s):

HTML5 DocumentViewer Serverless.zip (3,500kb) downloaded 255 time(s).

Edited by moderator Wednesday, December 27, 2023 2:42:30 PM(UTC) | Reason: Not specified

Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.


	Try the latest version of LEADTOOLS for free for 60 days by downloading the evaluation: https://www.leadtools.com/downloads Wanna join the discussion? Login to your LEADTOOLS Support account or Register a new forum account.

Notification

HOW TO: Use the HTML5 DocumentViewer Without a Service