DocumentBookmark Object

export class DocumentHelper { 
   static showServiceError = (jqXHR, statusText, errorThrown) => { 
      alert("Error returned from service. See the console for details."); 
      const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown); 
      console.error(serviceError); 
   } 
 
   static log = (message: string, data?: any) => { 
      const outputElement = document.getElementById("output"); 
      if (outputElement) { 
         const time = (new Date()).toLocaleTimeString(); 
         const textElement = document.createElement("p"); 
         textElement.innerHTML = (outputElement.childElementCount + 1) + " [" + time + "]: " + message; 
         outputElement.insertBefore(textElement, outputElement.firstChild); 
      } 
 
      if (!data) 
         console.log(message); 
      else 
         console.log(message, data); 
   } 
 
   static initFactory = () => { 
      // 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"; 
   } 
} 

import { DocumentHelper } from "../../utilities/DocumentHelper"; 
 
export class LEADDocument_StructureExample { 
   el; 
 
   constructor() { 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
      DocumentHelper.initFactory(); 
   } 
 
   run(buttonID) { 
      this.el = document.getElementById(buttonID); 
      this.el.onclick = this.loadDocument; 
   } 
 
   loadDocument = () => { 
      const url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
      DocumentHelper.log("Loading document..."); 
 
      lt.Document.DocumentFactory.loadFromUri(url, null) 
         .done((doc) => { 
            DocumentHelper.log("Done. Showing the structure..."); 
 
            if (!doc.isStructureSupported) { 
               // This document does not support table of content or links 
               DocumentHelper.log("Structure not supported"); 
               return; 
            } 
 
            if (doc.structure.isParsed) { 
               // Show them 
               this.showBookmarks(doc.structure.bookmarks); 
            } 
            else { 
               // We support it, but we don't have it parsed yet 
               doc.structure.parse() 
                  .done((doc) => { 
                     DocumentHelper.log("Document structure was parsed successfully"); 
                     this.showBookmarks(doc.structure.bookmarks); 
                  }) 
                  .fail(DocumentHelper.showServiceError); 
            } 
 
         }) 
         .fail(DocumentHelper.showServiceError); 
   } 
 
   showBookmarks = (bookmarks) => { 
      const ul = this.makeBookmarkList(bookmarks); 
      this.el.parentNode.appendChild(ul); 
   } 
 
   makeBookmarkList = (bookmarks) => { 
      if (bookmarks && bookmarks.length) { 
         const ul = document.createElement("ul"); 
         for (let i = 0; i < bookmarks.length; i++) { 
            const bookmark = bookmarks[i]; 
            const li = document.createElement("li"); 
            const span = document.createElement("span"); 
            span.innerHTML = bookmark.title + " (Page " + bookmark.target.pageNumber + ")"; 
            li.appendChild(span); 
            if (bookmark.children.length) 
               li.appendChild(this.makeBookmarkList(bookmark.children)); 
            ul.appendChild(li); 
         } 
         return ul; 
      } 
      return null; 
   } 
} 

export class DocumentHelper { 
   static showServiceError = (jqXHR, statusText, errorThrown) => { 
      alert("Error returned from service. See the console for details."); 
      const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown); 
      console.error(serviceError); 
   } 
 
   static log = (message, data) => { 
      const outputElement = document.getElementById("output"); 
      if (outputElement) { 
         const time = (new Date()).toLocaleTimeString(); 
         const textElement = document.createElement("p"); 
         textElement.innerHTML = (outputElement.childElementCount + 1) + " [" + time + "]: " + message; 
         outputElement.insertBefore(textElement, outputElement.firstChild); 
      } 
 
      if (!data) 
         console.log(message); 
      else 
         console.log(message, data); 
   } 
 
   static initFactory = () => { 
      // 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"; 
   } 
} 

<!doctype html> 
<html lang="en"> 
<title>Document Example | Structure</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../../LT/Leadtools.js"></script> 
   <script src="../../LT/Leadtools.Controls.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Main.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../../LT/Leadtools.Document.js"></script> 
   <script src="../../LT/Leadtools.Document.Viewer.js"></script> 
   <link rel="stylesheet" type="text/css" href="../../css/examples.css"> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
   <div> 
      <button type="button" id="exampleButton">Run Example</button> 
   </div> 
   <div id="output"></div> 
   <div> 
      <img id="img" /> 
   </div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.LEADDocument.Structure(); 
      example.run("exampleButton"); 
   }; 
</script> 
</html>