DocumentViewer Object


The DocumentViewer is the main class used by the Document Viewer.

function lt.Document.Viewer.DocumentViewer 
	implements IDisposable 
class lt.Document.Viewer.DocumentViewer() 
	implements IDisposable 


The DocumentViewer is not a control itself: instead, it uses the UI controls created by the parent containers. These containers are native controls in the calling platform - for example, Control in Windows Forms and DIV in HTML5/JavaScript.

Create a document viewer by calling the createDocumentViewer method. You can then use it by loading a LEADDocument object and calling the SetDocument method to view the document.

When the document viewer is created, a new instance of the DocumentViewerView is created and set in the DocumentViewer.View property.

Next, a new instance of the ImageViewer control is created and is added as a child control to the DocumentViewerCreateOptions.ViewContainer. This image viewer will be used to view the Raster or SVG image data of the pages when an LEADDocument is set in the viewer. This control can be accessed by using the ImageViewer property.

Then the interactive modes are initialized and added to ImageViewer.InteractiveModes.


This example will show how to create a functional DocumentViewer in your application.

<!DOCTYPE html> 
   <title>LEADTOOLS Document Viewer Example</title> 
   <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
   <!-- jQuery Core --> 
   <script src="" crossorigin="anonymous"></script> 
   <!-- LEADTOOLS Libraries --> 
   <script src="Scripts/Leadtools.js"></script> 
   <script src="Scripts/Leadtools.Controls.js"></script> 
   <script src="Scripts/Leadtools.Annotations.Engine.js"></script> 
   <script src="Scripts/Leadtools.Annotations.Designers.js"></script> 
   <script src="Scripts/Leadtools.Annotations.Rendering.JavaScript.js"></script> 
   <script src="Scripts/Leadtools.Annotations.Automation.js"></script> 
   <script src="Scripts/Leadtools.Annotations.BatesStamp.js"></script> 
   <script src="Scripts/Leadtools.Demos.js"></script> 
   <script src="Scripts/Leadtools.Demos.Annotations.js"></script> 
   <script src="Scripts/Leadtools.Document.js"></script> 
   <script src="Scripts/Leadtools.Document.Viewer.js"></script> 
   <script type="text/javascript"> 
      var documentViewer, serviceStatus, output, exampleButton; 
      // Parses error information. 
      function showServiceError(jqXHR, statusText, errorThrown) { 
         alert("Error returned from service. See the console for details.") 
         var serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown); 
      // Startup function 
      document.addEventListener("DOMContentLoaded", function () { 
         lt.RasterSupport.setLicenseUri("", "EVAL", null); 
         serviceStatus = document.getElementById("serviceStatus"); 
         output = document.getElementById("output"); 
         var exampleButton = document.getElementById("exampleButton"); 
         exampleButton.addEventListener("click", function (e) { 
            // Run the example 
            exampleButton.disabled = true; 
         }, false); 
         // To communicate with the DocumentsService, it must be running! 
         // Change these parameters to match the path to the service. 
         lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
         lt.Document.DocumentFactory.servicePath = ""; 
         lt.Document.DocumentFactory.serviceApiPath = "api"; 
         serviceStatus.innerHTML = "Connecting to service: " + lt.Document.DocumentFactory.serviceUri; 
            .done(function (serviceData) { 
               serviceStatus.innerHTML = "Service connection verified!"; 
               // Create the DocumentViewer 
            .fail(function () { 
               serviceStatus.innerHTML = "Service not properly connected."; 
      function createDocumentViewer() { 
         // Initialize the user interface 
         var interactiveSelect = document.getElementById("interactiveSelect"); 
         var panZoomOption = document.createElement("option"); 
         panZoomOption.innerHTML = "Pan / Zoom"; 
         panZoomOption.value = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom; 
         var textOption = document.createElement("option"); 
         textOption.value = lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText; 
         textOption.innerHTML = "Select Text"; 
         interactiveSelect.addEventListener("change", function () { 
         var annotationsSelect = document.getElementById("annotationsSelect"); 
         var annSelectOption = document.createElement("option"); 
         annSelectOption.innerHTML = "Select Annotation"; 
         annSelectOption.value = lt.Annotations.Engine.AnnObject.selectObjectId; 
         var annLineOption = document.createElement("option"); 
         annLineOption.innerHTML = "Line Object"; 
         annLineOption.value = lt.Annotations.Engine.AnnObject.lineObjectId; 
         var annRectOption = document.createElement("option"); 
         annRectOption.innerHTML = "Rectangle Object"; 
         annRectOption.value = lt.Annotations.Engine.AnnObject.rectangleObjectId; 
         annotationsSelect.addEventListener("change", function () { 
            documentViewer.annotations.automationManager.currentObjectId = parseInt(annotationsSelect.value, 10); 
         // Init the document viewer, pass along the panels 
         var createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions(); 
         // We are not going to use elements mode in this example 
         createOptions.viewCreateOptions.useElements = false; 
         createOptions.thumbnailsCreateOptions.useElements = false; 
         // The middle panel for the view 
         createOptions.viewContainer = document.getElementById("middle-panel"); 
         // The left panel for the thumbnails 
         createOptions.thumbnailsContainer = document.getElementById("left-panel"); 
         // The right panel is for bookmarks 
         createOptions.bookmarksContainer = document.getElementById("right-panel"); 
         createOptions.useAnnotations = true; 
         // Create the document viewer 
         documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions); 
         // We prefer SVG viewing 
         documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg; 
         // Create html5 rendering engine 
         documentViewer.annotations.automationManager.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
         // Initialize documentViewer annotations 
         // Handle what to do when current object Id changed 
         documentViewer.annotations.automationManager.currentObjectIdChanged.add(function (sender, e) { 
            // When done drawing, the manger will return to the select object; so we need force the annotationsSelect element to return to the select object option 
            annotationsSelect.value = sender.currentObjectId; 
         // Load a PDF document 
         var url = ""; 
         lt.Document.DocumentFactory.loadFromUri(url, null) 
            .done(function (doc) { 
               // We have a document 
               function ready() { 
                  // Set the document in the viewer 
                  // Run pan/zoom 
                  var panZoom = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom; 
                  interactiveSelect.value = panZoom; 
               if (doc.isStructureSupported && !doc.structure.isParsed) { 
               else { 
      function example() { 
         // TODO: add example code here 
         alert("Run specific example code here!"); 
      body { 
         font-family: monospace; 
      .container { 
         border: 2px solid #aaa; 
         float: left; 
         margin-top: 10px; 
      .panel { 
         float: left; 
         height: 800px; 
      #left-panel { 
         width: 170px; 
         background-color: #ddd; 
      #middle-panel { 
         width: 860px; 
         background-color: #eee; 
      #right-panel { 
         width: 250px; 
         background-color: #ddd; 
      #right-panel ul { 
         padding-left: 20px; 
      <div id="serviceStatus"></div> 
         <label for="interactiveSelect">Interactive mode:</label> 
         <select id="interactiveSelect"></select> 
         <label for="annotationsSelect">Annotations objects:</label> 
         <select id="annotationsSelect"></select> 
         <button type="button" id="exampleButton">Run Example</button> 
      <div id="output"></div> 
   <div class="container"> 
      <div id="left-panel" class="panel"> 
      <div id="middle-panel" class="panel"> 
      <div id="right-panel" class="panel"> 


Target Platforms

Help Version 20.0.2019.3.11
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2019 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Document.Viewer Assembly