gotoPage Method

Summary

Go to the specified page.

Syntax
TypeScript
JavaScript
DocumentViewer.prototype.gotoPage = function( 
   pageNumber 
) 
gotoPage( 
   pageNumber: number 
): void; 

Parameters

pageNumber

1-based number of the page to go to.

Remarks

This method moves the view to the page specified by performing the following:

  1. Finds the ImageViewerItem that corresponds to the page number in the imageViewer - 1

  2. Sets this as the ActiveItem

  3. Calls View.ImageViewer.GotoItem

  4. If thumbnails are used: Ensures that the thumbnail for the page is visible by calling Thumbnails.ImageViewer.EnsureItemVisible

  5. If annotations are used: Sets the corresponding AnnContainer as the ActiveContainer

Example

In this example, clicking the example button will add a new button that, on each click, will go to the next page until the end of the document is reached.

Start with the example from DocumentViewer and replace all the code inside the example function (search for the "// TODO: add example code here" comment) with the following code:

TypeScript
JavaScript
/// DocumentViewer.html 
<!DOCTYPE html> 
<html> 
 
<head> 
   <title>LEADTOOLS Document Viewer Example</title> 
   <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
   <!-- jQuery Core --> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 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); 
         console.error(serviceError); 
      } 
 
      // Startup function 
      document.addEventListener("DOMContentLoaded", function () { 
         lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null); 
 
         serviceStatus = document.getElementById("serviceStatus"); 
         output = document.getElementById("output"); 
 
         var exampleButton = document.getElementById("exampleButton"); 
         exampleButton.addEventListener("click", function (e) { 
            // Run the example 
            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; 
         lt.Document.DocumentFactory.verifyService() 
            .done(function (serviceData) { 
               serviceStatus.innerHTML = "Service connection verified!"; 
               // Create the DocumentViewer 
               createDocumentViewer(); 
            }) 
            .fail(showServiceError) 
            .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; 
         interactiveSelect.appendChild(panZoomOption); 
 
         var textOption = document.createElement("option"); 
         textOption.value = lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText; 
         textOption.innerHTML = "Select Text"; 
         interactiveSelect.appendChild(textOption); 
 
         interactiveSelect.addEventListener("change", function () { 
            documentViewer.commands.run(interactiveSelect.value); 
         }); 
 
         var annotationsSelect = document.getElementById("annotationsSelect"); 
 
         var annSelectOption = document.createElement("option"); 
         annSelectOption.innerHTML = "Select Annotation"; 
         annSelectOption.value = lt.Annotations.Engine.AnnObject.selectObjectId; 
         annotationsSelect.appendChild(annSelectOption); 
 
         var annLineOption = document.createElement("option"); 
         annLineOption.innerHTML = "Line Object"; 
         annLineOption.value = lt.Annotations.Engine.AnnObject.lineObjectId; 
         annotationsSelect.appendChild(annLineOption); 
 
         var annRectOption = document.createElement("option"); 
         annRectOption.innerHTML = "Rectangle Object"; 
         annRectOption.value = lt.Annotations.Engine.AnnObject.rectangleObjectId; 
         annotationsSelect.appendChild(annRectOption); 
 
         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 
         documentViewer.annotations.initialize(); 
         // 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 = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
         lt.Document.DocumentFactory.loadFromUri(url, null) 
            .done(function (doc) { 
               // We have a document 
 
               function ready() { 
                  // Set the document in the viewer 
                  documentViewer.setDocument(doc); 
 
                  // Run pan/zoom 
                  var panZoom = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom; 
                  interactiveSelect.value = panZoom; 
                  documentViewer.commands.run(panZoom); 
               } 
 
               if (doc.isStructureSupported && !doc.structure.isParsed) { 
                  doc.structure.parse() 
                     .done(ready) 
                     .fail(showServiceError); 
               } 
               else { 
                  ready(); 
               } 
            }) 
            .fail(showServiceError); 
      } 
 
      function example() { 
         // TODO: add example code here 
         alert("Run specific example code here!"); 
      } 
 
   </script> 
   <style> 
      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; 
      } 
   </style> 
</head> 
 
<body> 
   <div> 
      <div id="serviceStatus"></div> 
      <div> 
         <label for="interactiveSelect">Interactive mode:</label> 
         <select id="interactiveSelect"></select> 
      </div> 
      <div> 
         <label for="annotationsSelect">Annotations objects:</label> 
         <select id="annotationsSelect"></select> 
      </div> 
      <div> 
         <button type="button" id="exampleButton">Run Example</button> 
      </div> 
      <div id="output"></div> 
   </div> 
   <div class="container"> 
      <div id="left-panel" class="panel"> 
      </div> 
      <div id="middle-panel" class="panel"> 
      </div> 
      <div id="right-panel" class="panel"> 
      </div> 
   </div> 
</body> 
 
</html> 
/// DocumentViewer.js 
// Add a button to change the page 
var button = document.createElement("button"); 
output.appendChild(button); 
button.innerHTML = "Change Page"; 
button.onclick = function () { 
   // Go towards the last page 
   if (documentViewer.currentPageNumber < documentViewer.pageCount) { 
      documentViewer.gotoPage(documentViewer.currentPageNumber + 1); 
   } else { 
      alert("You've reached the last page!"); 
   } 
} 
/// Include.html 
<!doctype html> 
<html lang="en"> 
    <head> 
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
        <script src="/scripts/LEADTOOLS/Leadtools.js"></script> 
        <script src="/scripts/LEADTOOLS/Leadtools.Controls.js"></script> 
        <script src="/scripts/LEADTOOLS/Leadtools.Annotations.Engine.js"></script> 
        <script src="/scripts/LEADTOOLS/Leadtools.Annotations.Designers.js"></script> 
        <script src="/scripts/LEADTOOLS/Leadtools.Annotations.Rendering.Javascript.js"></script> 
        <script src="/scripts/LEADTOOLS/Leadtools.Annotations.Automation.js"></script> 
        <script src="/scripts/LEADTOOLS/Leadtools.ImageProcessing.Main.js"></script> 
        <script src="/scripts/LEADTOOLS/Leadtools.ImageProcessing.Color.js"></script> 
        <script src="/scripts/LEADTOOLS/Leadtools.ImageProcessing.Core.js"></script> 
        <script src="/scripts/LEADTOOLS/Leadtools.ImageProcessing.Effects.js"></script> 
        <script src="/scripts/LEADTOOLS/Leadtools.Document.js"></script> 
        <script src="/scripts/LEADTOOLS/Leadtools.Document.Viewer.js"></script>> 
        <script> 
            // 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"; 
            let docViewer = null; 
 
            document.addEventListener("DOMContentLoaded", () => { 
               lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null); 
               const serviceStatus = document.getElementById("serviceStatus"); 
               const output = document.getElementById("output"); 
 
               // 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; 
 
               lt.Document.DocumentFactory.verifyService() 
                  .done((serviceData)=>{ 
                        serviceStatus.innerHTML = "Service connection verified!"; 
                        createDocumentViewer(); 
                  }) 
                  .fail(showServiceError) 
                  .fail(()=>{ 
                        serviceStatus.innerHTML = "Service not properly connected."; 
                  }); 
            }); 
 
            const createDocumentViewer = () => { 
               // Initialize the user interface 
               const interactiveSelect = document.getElementById("interactiveSelect"); 
 
               const panZoomOption = document.createElement("option"); 
               panZoomOption.innerHTML = "Pan / Zoom"; 
               panZoomOption.value = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom; 
               interactiveSelect.appendChild(panZoomOption); 
 
               const textOption = document.createElement("option"); 
               textOption.value = lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText; 
               textOption.innerHTML = "Select Text"; 
               interactiveSelect.appendChild(textOption); 
 
               let documentViewer = null; 
 
               interactiveSelect.addEventListener("change", function () { 
                  documentViewer.commands.run(interactiveSelect.value, null); 
               }); 
 
               const annotationsSelect = document.getElementById("annotationsSelect"); 
 
               const annSelectOption = document.createElement("option"); 
               annSelectOption.innerHTML = "Select Annotation"; 
               annSelectOption.value = lt.Annotations.Engine.AnnObject.selectObjectId.toString(); 
               annotationsSelect.appendChild(annSelectOption); 
 
               const annLineOption = document.createElement("option"); 
               annLineOption.innerHTML = "Line Object"; 
               annLineOption.value = lt.Annotations.Engine.AnnObject.lineObjectId.toString(); 
               annotationsSelect.appendChild(annLineOption); 
 
               const annRectOption = document.createElement("option"); 
               annRectOption.innerHTML = "Rectangle Object"; 
               annRectOption.value = lt.Annotations.Engine.AnnObject.rectangleObjectId.toString(); 
               annotationsSelect.appendChild(annRectOption); 
 
               annotationsSelect.addEventListener("change", function () { 
               documentViewer.annotations.automationManager.currentObjectId = parseInt(annotationsSelect.value, 10); 
               }); 
 
               // Init the document viewer, pass along the panels 
               const 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); 
               docViewer = documentViewer; 
               // 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 
               documentViewer.annotations.initialize(); 
               // Handle what to do when current object Id changed 
               documentViewer.annotations.automationManager.currentObjectIdChanged.add(function (sender, e) { 
               // When done drawing, the manager 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 
               const url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
               lt.Document.DocumentFactory.loadFromUri(url, null) 
               .done((doc) => { 
                  // We have a document 
                  const ready = () => { 
                     // Set the document in the viewer 
                     documentViewer.setDocument(doc); 
                     // Run pan/zoom 
                     var panZoom = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom; 
                     interactiveSelect.value = panZoom; 
                     documentViewer.commands.run(panZoom, null); 
                  } 
 
                  if (doc.isStructureSupported && !doc.structure.isParsed) { 
                     doc.structure.parse() 
                           .done(ready) 
                           .fail(showServiceError); 
                  } 
                  else { 
                     ready(); 
                  } 
               }) 
               .fail(showServiceError); 
            } 
 
            const getDocumentViewer = () => { 
                  return docViewer; 
            } 
 
        </script> 
    </head> 
    <style> 
        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; 
        } 
     </style> 
 
<body> 
    <div> 
       <div id="serviceStatus"></div> 
       <div> 
          <label for="interactiveSelect">Interactive mode:</label> 
          <select id="interactiveSelect"></select> 
       </div> 
       <div> 
          <label for="annotationsSelect">Annotations objects:</label> 
          <select id="annotationsSelect"></select> 
       </div> 
       <div> 
          <button type="button" id="exampleButton">Run Example</button> 
       </div> 
       <div id="output"></div> 
    </div> 
    <div class="container"> 
       <div id="left-panel" class="panel"> 
       </div> 
       <div id="middle-panel" class="panel"> 
       </div> 
       <div id="right-panel" class="panel"> 
       </div> 
    </div> 
 </body> 
</html> 
/// GotoPage.ts 
class DocumentViewer_GoToPageExample { 
    public constructor() { 
    } 
 
    public run(buttonID: string) { 
        const exampleButton = document.getElementById(buttonID); 
        exampleButton.onclick = this.addOperationEvent; 
    } 
 
    addOperationEvent = () => { 
        // This example assumes you already have a Document Viewer created. 
        const viewer = getDocumentViewer(); 
        const outputElement = document.getElementById("output"); 
 
        // Add a button to change the page 
        const button = document.createElement("button"); 
        outputElement.appendChild(button); 
 
        button.innerHTML = "Change Page"; 
        button.onclick = function () { 
            // Go towards the last page 
            if (viewer.currentPageNumber < viewer.pageCount) { 
                viewer.gotoPage(viewer.currentPageNumber + 1); 
            } else { 
                alert("You've reached the last page!"); 
            } 
        } 
    } 
 
} 

Requirements

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