HTML5/JavaScript Document Viewer SDK Technology

The LEADTOOLS Document Viewer is a zero-footprint document-viewing solution for HTML5/JavaScript front ends with a Microsoft .NET (IIS), .NET Core (Kestral), or Java (Linux/Apache) hosted back end. Developers can create robust, full-featured applications with rich document-viewing capabilities, including text search, annotation, memory-efficient paging, inertial scrolling, and vector display. Providing a uniform UI and UX for both raster and document formats, the LEADTOOLS Document Viewer is ideal for Enterprise Content Management (ECM), document retrieval, and document normalization solutions.

LEADVIEW API

LEADVIEW API is the Document Viewer wrapped into a ReactJS UI control that is fully customizable through configuration files. With only a few lines of code, you can add the LEADVIEW API to any HTML5/JavaScript project, including SharePoint Online and on-premises environments. The component provides all the features of the low-level Document Viewer, including more than 150 file formats plus more than 30 annotation and markup objects. Your end-users can easily create themes for the UI or use the predefined dark and light themes. With a settings dialog or JSON file, the entire ReactJS UI can be customized by each end-user or administratively locked down on a server level.

The LEADTOOLS Document Viewer is also available as a .NET control for WinForms and WPF.

Overview of LEADTOOLS Document Viewer SDK Technology for HTML5/JavaScript Development

  • View document, vector, and raster formats in one viewer:
  • Flexible, secure, and stable file management
    • Utilize a completely disk-less cache to satisfy the most stringent security and privacy requirements
    • Integrate with third-party cloud storage, including SharePoint, OneDrive, and Google Drive™
  • Document-specific interactive tools:
  • View and edit complex document objects such as:
    • Annotations (LEAD proprietary, Adobe PDF native, and IBM FileNet P8 and Daeja)
    • Hyperlinks
    • Unicode text, including Japanese, Chinese, Arabic, and Hebrew
    • Fonts and styles
    • Embedded images with compression
    • Table of Contents
    • Metadata
    • Bookmarks
  • Virtual Document Composer
    • Create documents on the fly from any number of pages in any order from multiple source documents
    • Modify virtual documents programmatically or by hand using drag-and-drop interface
    • Save virtual documents to the server and share between multiple users
    • Export virtual documents to actual document formats such as PDF or TIFF
  • Document Comparer
    • Quickly find visual differences between two or more documents with side-by-side or overlay comparison
    • Synchronize the scrolling of two or more document viewers
  • Native JavaScript, client-side only rendering of multiple formats including PDF, TIFF, JPEG, PNG, and GIF
  • Fully customizable user interface uses generic parent containers (e.g., Control & DIV) to enable easy integration of core Document Viewer features into any UI library and platform
  • Standalone, ready-to-run viewing solution is perfect for rapid customization and integration into existing document management systems, workflows, and hosting environments
  • Maximize performance and conserve system resources through efficient large-document paging and thumbnail browsing with configurable lazy-loading
  • Keep track of changes with Document History Tracking
  • Robust configuration options and functions to manage local, global, and web cache including examples for SQL Server, Azure, and Ehcache
  • Print documents with ability to set paper size, visible printable area, and DPI
  • Seamlessly integrates with the LEADTOOLS Document Converter technology to convert any file
  • Ideal viewer control for ASP.NET MVC applications
  • Can be hosted in IIS using web services and Linux using Java services
  • Easy to use and customizable viewer programming interface available for .NET (C# & VB) and HTML5/JavaScript
 

View a PDF in Your JavaScript App

Create your layout with a container:

<body><noscript>You need to enable JavaScript to run this app.</noscript>
	<div id="initialDiv" style="width:100%;height:100vh"></div>
</body>

Then, initialize your viewer and load a PDF

<script>
   const lv = new lt.LEADVIEW.Viewer();
   // Configure LEADVIEW API to use the .NET FX DocumentService port
   const serviceUrl = "http://localhost:40000";
   const fileToLoad = "https://demo.leadtools.com/images/pdf/leadtools.pdf"
   lv.run(null, {
      "serviceHost": serviceUrl,
      "localProxyUrlTemplate": serviceUrl + "/api/CorsProxy/Proxy?{0}",
      "rootDivId": "initialDiv"
   });
   const loadOptions: lt.LEADVIEW.LoadFromUriParameters = { 
      url: fileToLoad, 
      fileLoadMode: lt.Document.DocumentLoadMode.service
   };
   lv.loadFromUri(loadOptions);
</script>

Technology Related to HTML5/JavaScript Document Viewer

Start Coding with LEADTOOLS

Download the Full Evaluation

The Full Evaluation Download includes all LEADTOOLS Document, Medical, Imaging, and Vector technologies for all development and target platforms. Get everything LEADTOOLS all in one convenient download.

Download Projects using NuGet

LEADTOOLS provides NuGet packages for .NET Framework, .NET Core, UWP, and Xamarin development. Download projects that reference our NuGets and start coding right away.

Note for Linux customers:
The LEADTOOLS Evaluation for Linux download includes an Eclipse project with set up and build instructions. Alternatively, you can contact support to request a Linux-based virtual-machine image with the LEADTOOLS Document Viewer client and service already set up in Eclipse/Apache and ready to evaluate.

Supported Development Platforms for HTML5/JavaScript Document Viewer

Code Tips That use HTML5/JavaScript Document Viewer

Documentation Links for HTML5/JavaScript Document Viewer

White Papers Written About HTML5/JavaScript Document Viewer

  • Converting and Viewing Documents with LEADTOOLS

    Convert a Word document into a PDF file. View the PDF, annotate it, and then save it. This process sounds simple enough, right? What if the original document was a TIFF file? Is it just as easy to convert a TIFF to a PDF and then view, annotate, and save the new file? What if you have ten different file types to view, annotate, and save, and what if those different files are both raster images and vector documents? And what if your job requirement specified that you can only do this task in one application, using one viewer control? This commonly requested task no longer sounds so simple. The new Document Converter and Document Viewer found in LEADTOOLS Version 19 not only make it possible to view and annotate raster and vector based file formats in the same control, they make it easy.

  • End-to-End eDiscovery with LEADTOOLS Document Imaging

    When it comes to change, the desire for efficiency is surely at or near the top of the list of reasons. Some processes and industries are harder to change, especially those that have been around for a long time. Court systems in many countries are one of the oldest and most well established processes to ensure all-around fairness, even if it must sacrifice expediency. Thankfully, the legal industry has taken major strides towards adapting to the digital age with the evolution of eDiscovery and document imaging.

Demo Applications that Include HTML5/JavaScript Document Viewer

HTML5/JavaScript Document Viewer

Demonstrates the LEADTOOLS Document Viewer in an HTML5/JavaScript application. The Document Viewer can be used to view raster, text, and document formats, making it ideal for Enterprise Content Management (ECM), document retrieval, and document normalization solutions.

  • Load a document from local disk and url
  • Draw annotations on the document
  • Use thumbnail viewer for page selection
  • View any bookmarks that have been included in the document
  • Interactive zooming/panning
  • Print annotated documents

HTML5/JavaScript LEADVIEW

LEAD has packaged the LEADTOOLS Document Viewer web application and service into the LEADVIEW API component. It requires as little as three lines of code to plug the LEADVIEW API into any JavaScript application. The component is highly customizable and supports all the features of the existing low-level Document Viewer, including viewing and converting hundreds of file formats and more than 30 annotation and markup objects. Users can easily create themes for the UI or use the predefined dark or light themes. With a settings dialog or JSON file, the entire ReactJS UI can be customized by each end-user or administratively locked down at a server level.

HTML5/JavaScript Document Composer

Load and view multiple files while interactively dragging and dropping pages to compose one custom document. Virtual documents created by this demo can be saved on the server, shared with multiple users, and exported to any format.

  • Load a document from local disk and url
  • Create custom documents
  • Organize pages
  • Export to any supported file format

HTML5/JavaScript Document Compare

Compare two documents side-by-side, split screen view, or with overlay within the Document Viewer. Comparing the documents will highlight the differences between the two documents being compared. The LEADTOOLS Document Compare library provides easy text-based comparisons with string, DocumentPageText, and LEADDocument objects.

Screenshots of HTML5/JavaScript Document Viewer

HTML5/JavaScript Document Viewer

HTML5/JavaScript Document Viewer

HTML5/JavaScript Document Composer

HTML5/JavaScript Document Composer

Videos of HTML5/JavaScript Document Viewer

Document Converter and Document Viewer

In this video, we will explore the LEADTOOLS Document Converter and Document Viewer, which were introduced in LEADTOOLS Version 19. This unique framework includes .NET and HTML5/JavaScript development libraries. It is perfect for developing a unified solution for converting, viewing, editing, searching and annotating document and image file formats.

NOTE: Since the release of this video, this LEADTOOLS feature has been updated. Some portions of this video may not reflect the most recent version of LEADTOOLS. If you have questions regarding this video or LEADTOOLS, please contact support@leadtools.com.

LEADTOOLS SDK Products that Include HTML5/JavaScript Document Viewer

LEADTOOLS Document Imaging Suite v20

The LEADTOOLS Document Imaging Suite SDK is a comprehensive collection of LEADTOOLS SDK features designed to build end-to-end document imaging solutions that require OCR, MICR, OMR, ICR, barcode, forms recognition and processing, PDF, HTML5 Zero-footprint viewing, conversion, print, capture, archival, annotation, and image viewing functionality. This powerful set of tools utilizes LEAD's award-winning image processing technology to intelligently identify document features that can be used to recognize and extract data from any type of scanned or faxed form image.