Display Documents in HTML5/JavaScript Using the Document Viewer


Take the following steps to display documents in the LEADTOOLS Document Viewer for HTML5:

  1. Create a new HTML file and name it documentViewer.html. Replace the contents with the following HTML:

    JavaScript Example
    <!DOCTYPE html> 
       <meta charset="utf-8" /> 
       <title>LEADTOOLS HTML5 Document Viewer Demo</title> 
       <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
       <!-- LEADTOOLS Libraries --> 
       <script type="text/javascript" src="lib/Leadtools.js"></script> 
       <script type="text/javascript" src="lib/Leadtools.Controls.js"></script> 
       <script type="text/javascript" src="lib/Leadtools.Annotations.Core.js"></script> 
       <script type="text/javascript" src="lib/Leadtools.Annotations.Designers.js"></script> 
       <script type="text/javascript" src="lib/Leadtools.Annotations.Rendering.JavaScript.js"></script> 
       <script type="text/javascript" src="lib/Leadtools.Annotations.Automation.js"></script> 
       <script type="text/javascript" src="lib/Leadtools.Documents.js"></script> 
       <script type="text/javascript" src="lib/Leadtools.Documents.UI.js"></script> 
       <script type="text/javascript" src="app.js"></script> 
       <div id="thumbnailsDiv" style="float: left; width: 200px; height: 600px; background-color: gray"></div> 
       <div id="documentViewerDiv" style="float: left; width: 600px; height: 600px;"></div> 

  2. Create a JS file named app.js in the same folder as documentViewer.html and add the following code to it:

    JavaScript Example
    window.onload = function () { 
      // Init the document viewer, pass along the panels 
      var createOptions = new lt.Documents.UI.DocumentViewerCreateOptions(); 
      // We are not going to use elements mode in this example 
      createOptions.viewCreateOptions.useElements = false; 
      createOptions.thumbnailsCreateOptions.useElements = false; 
      // Set thumbnailsContainer 
      createOptions.thumbnailsContainer = document.getElementById("thumbnailsDiv"); 
      // Set viewContainer 
      createOptions.viewContainer = document.getElementById("documentViewerDiv"); 
      // Create the document viewer 
      this._documentViewer = lt.Documents.UI.DocumentViewerFactory.createDocumentViewer(createOptions); 
      // Set interactive mode 
      // We prefer SVG viewing 
      this._documentViewer.view.preferredItemType = lt.Documents.UI.DocumentViewerItemType.svg; 
      var _this = this; 
      // Load a PDF document 
      var url = "http://demo.leadtools.com/images/pdf/leadtools.pdf"; 
      lt.Documents.DocumentFactory.loadFromUri(url, null) 
         .done( function(document) { 
            // We have a document 
            _this._documentViewer.operation.add(function (sender, e) { 
               if (e.operation == lt.Documents.UI.DocumentViewerOperation.loadingBookmarks) { 
                  // Disable the bookmarks when we are loading, enable when we are done 
                  $("#right-panel").prop("disabled", !e.isPostOperation); 
            // Set the document in the viewer 
            // Run pan/zoom 
         .fail(function (jqXHR, statusText, errorThrown) { 
            alert("Error loading document: " + errorThrown) 

  3. Create a folder named lib in the same folder as the documentViewer.html and app.js files and copy the following LEADTOOLS JavaScript files into this folder. These files can be found in "<LEADTOOLS_INSTALLDIR>\Bin\JS":

  4. Leadtools.js

  5. Leadtools.Controls.js
  6. Leadtools.Annotations.Core.js
  7. Leadtools.Annotations.Designers.js
  8. Leadtools.Annotations.Rendering.JavaScript.js
  9. Leadtools.Annotations.Automation.js
  10. Leadtools.Documents.js
  11. Leadtools.Documents.UI.js

  12. To test, launch the page in a web browser that supports HTML5.

Help Version 19.0.2017.10.27
Products | Support | Contact Us | Copyright Notices
© 1991-2017 LEAD Technologies, Inc. All Rights Reserved.