Display Documents in HTML5/JavaScript Using the Document Viewer

Summary

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

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

JavaScript Example

<!DOCTYPE html> 
<html> 
<head> 
   <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> 
</head> 
<body> 
   <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> 
</body> 
</html>

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 
  this._documentViewer.commands.run(lt.Documents.UI.DocumentViewerCommands.interactivePanZoom); 
                    
  // 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 
        _this._documentViewer.setDocument(document); 
                    
        // Run pan/zoom 
        $("#interactiveSelect").val(lt.Documents.UI.DocumentViewerCommands.interactiveSelectText); 
     }) 
     .fail(function (jqXHR, statusText, errorThrown) { 
        alert("Error loading document: " + errorThrown) 
     }); 
}

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":
Leadtools.js
Leadtools.Controls.js
Leadtools.Annotations.Core.js
Leadtools.Annotations.Designers.js
Leadtools.Annotations.Rendering.JavaScript.js
Leadtools.Annotations.Automation.js
Leadtools.Documents.js
Leadtools.Documents.UI.js
To test, launch the page in a web browser that supports HTML5.