Welcome Guest! To enable all features, please Login or Register.

Notification

Icon
Error

Options
View
Last Go to last post Unread Go to first unread post
#1 Posted : Tuesday, August 8, 2017 6:08:12 AM(UTC)

sepideh  
sepideh

Groups: Registered
Posts: 6

Thanks: 4 times

Hello everyone,
I have faced some problem with loading bookmark..can u please tell me which steps I should take to create and load a bookmark?...The thing is that I am using the pdf file u have put as an example in documentViewer solution....

The first thing I do is when I want to create my document viewer I add these lines:

createOptions.thumbnailsContainer = document.getElementById("thumbnailsDiv");
createOptions.viewContainer = document.getElementById("documentViewerDiv");
createOptions.bookmarksContainer = document.getElementById("bookMarkDiv");
this._documentViewer = lt.Documents.UI.DocumentViewerFactory.createDocumentViewer(createOptions);

and before I want to set document to documentViewer I do this:
document.isStructureSupported = true;
document.structure.parseBookmarks = true;
document.structure.parsePageLinks = true;
document.structure.isParsed = true;
document.structure.parse();

showStructure(document);
document.structure.parse();


// Set the document in the viewer
_documentViewer.setDocument(document);


and in showStructure() Method ,I added what I found here in this link:
https://www.leadtools.co...x/documentstructure.html



but the thing is that bookmark.length is always zero.....What I must do more?should I create a bookmark?but how?

I will be grateful if u can answer me.....
regards
 

Try the latest version of LEADTOOLS for free for 60 days by downloading the evaluation: https://www.leadtools.com/downloads

Wanna join the discussion? Login to your LEADTOOLS Support accountor Register a new forum account.

#2 Posted : Friday, August 11, 2017 4:45:25 PM(UTC)

Aaron  
Aaron

Groups: Registered, Tech Support, Administrators
Posts: 71

Was thanked: 3 time(s) in 3 post(s)

Hello,

You can use our Tutorial1 demo project in the HTML5 Document Viewer demo solution as a base and add the code from the link you provided and it will print out the bookmarks in the console of the browser. The HTML5 Document Viewer solution is located here in the LEADTOOLS installation:

<Install Directory>\LEADTOOLS 19\Examples\JS\Documents\DocumentViewer

I added the code from the link you provided into the demo and it prints out the bookmarks correctly:

Browser Console Show Bookmarks

Here is my source code for app.ts for reference:

Code:

/*
 * NOTE for .js: The file you are vieweing has been compiled via Tutorial1TypeScript/app.ts.
 * If you do not want to use TypeScript, unload (or delete) the project or delete the app.ts file.
 */

window.onload = () => {

   // Create the options object for the DocumentViewer
   var createOptions: lt.Documents.UI.DocumentViewerCreateOptions = new lt.Documents.UI.DocumentViewerCreateOptions();

   // We will choose to use Elements Mode for this example, but you can disable it
   // Elements Mode can be styled with CSS - see the HTML for information
   createOptions.viewCreateOptions.useElements = true;
   createOptions.thumbnailsCreateOptions.useElements = true;

   // Set thumbnailsContainer to #thumbnails
   createOptions.thumbnailsContainer = document.getElementById("thumbnails");
   // Set viewContainer to #documentViewer
   createOptions.viewContainer = document.getElementById("documentViewer");

   createOptions.bookmarksContainer = document.getElementById("bookmarks");

   // Create the document viewer
   this.documentViewer = lt.Documents.UI.DocumentViewerFactory.createDocumentViewer(createOptions);

   // Set interactive mode to Pan / Zoom
   this.documentViewer.commands.run(lt.Documents.UI.DocumentViewerCommands.interactivePanZoom);

   // We prefer SVG viewing over Image viewing for this example
   this.documentViewer.view.preferredItemType = lt.Documents.UI.DocumentViewerItemType.svg;
   // To use Image: lt.Documents.UI.DocumentViewerItemType.image;

   // Change our thumbnails to be centered horizontally in the provided container
   //this.documentViewer.thumbnails.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;

   // Before we call the service, we need to explain where it is ("localhost:19000/api", for example):
   lt.Documents.DocumentFactory.serviceHost = "http://localhost:19000"; // or wherever your host is
   lt.Documents.DocumentFactory.servicePath = ""; // the path to the root of the service, which is nothing for this example
   lt.Documents.DocumentFactory.serviceApiPath = "api"; // Routing occurs at "/api", unless you change the routing in the DocumentsService

   /* A quick example with a different service location:
    * > client: http://localhost:123
    * > service: https://www.leadtools.com/path/to/service
    * > service routing namespace: /api
    * 
    * Set these properties with these values:
    * serviceHost = "https://www.leadtools.com";
    * servicePath = "path/to/service";
    * serviceApiPath = "api"
    */

   // Load a PDF document
   var url = "https://demo.leadtools.com/images/pdf/leadtools.pdf";

   // Call the "LoadFromUri" and pass success and failure callbacks to the promise
   lt.Documents.DocumentFactory.loadFromUri(url, null)
      .done((document) => {
         // Set the document in the viewer
         showStructure(document);
         this.documentViewer.setDocument(document);
      })
      .fail((jqXHR, statusText, errorThrown) => {
         // Get more information from LEADTOOLS
         var serviceError = lt.Documents.ServiceError.parseError(jqXHR, statusText, errorThrown);
         lt.LTHelper.log(serviceError);

         // Show an alert about what the issue is
         var lines = [];
         lines.push("Document Viewer Error:");
         lines.push(serviceError.message);
         lines.push(serviceError.detail);
         lines.push("See console for details.")
         alert(lines.join("\n"));
      });
}

function showStructure(doc) {
   if (!doc.isStructureSupported) {
      // This document does not support table of content or links 
      return;
   }
   if (doc.structure.isParsed) {
      // Show them 
      var bookmarks = doc.structure.bookmarks;
      for (var i = 0; i < bookmarks.length; i++) {
         this.showBookmark(bookmarks[i], "");
      }
   }
   else {
      // We support it, but we dont have it parsed yet, do it now 
      doc.structure.parse()
         .done(function (doc) {
            console.log("Document structure was parsed succesfully");
            // Show the structure, this time doc.isStructureParsed is true and will not call 
            // the command again 
            showStructure(doc);
         });
   }
}

function showBookmark(bookmark, indent) {
   console.log(indent + "page:" + bookmark.target.pageNumber + " title '" + bookmark.title + "'");
   for (var i = 0; i < bookmark.children.length; i++) {
      showBookmark(bookmark.children[i], indent + "  ");
   }
}


The HTML5 Document Viewer demo parses the structure by calling the back end service in doc.structure.parse(). The code for the backend service can be found in StructureController.cs. It is hard to say exactly why the bookmarks are not working in your application without having your application itself to reproduce it, but you should be able to use our Tutoral1 demo and the code from the link you provided to get it working in the demo to compare with your application.

If you are still not able to get the bookmarks working in your application after following the steps above and comparing the Tutorial1 to your application, would you be able to provide us with a small sample application that reproduces the issue? If we can reproduce the issue on our end then we can certainly move forward with helping you figure out exactly what may be going wrong in your application and find you a solution.
Aaron Brasington
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
thanks 1 user thanked Aaron for this useful post.
sepideh on 8/15/2017(UTC)
 
#3 Posted : Tuesday, August 15, 2017 3:08:18 AM(UTC)

sepideh  
sepideh

Groups: Registered
Posts: 6

Thanks: 4 times

Thank you for your reply,Now I can see the structure in console...But how I can load it into container?I expect after setting the 'bookmarksContainer',I can see a tree of content inside container...
createOptions.bookmarksContainer = document.getElementById("bookmarks");

Should I make this tree on my own or it should be loaded after setting container?

regards






Originally Posted by: Aaron Go to Quoted Post
Hello,

You can use our Tutorial1 demo project in the HTML5 Document Viewer demo solution as a base and add the code from the link you provided and it will print out the bookmarks in the console of the browser. The HTML5 Document Viewer solution is located here in the LEADTOOLS installation:

<Install Directory>\LEADTOOLS 19\Examples\JS\Documents\DocumentViewer

I added the code from the link you provided into the demo and it prints out the bookmarks correctly:

Browser Console Show Bookmarks

Here is my source code for app.ts for reference:

Code:

/*
 * NOTE for .js: The file you are vieweing has been compiled via Tutorial1TypeScript/app.ts.
 * If you do not want to use TypeScript, unload (or delete) the project or delete the app.ts file.
 */

window.onload = () => {

   // Create the options object for the DocumentViewer
   var createOptions: lt.Documents.UI.DocumentViewerCreateOptions = new lt.Documents.UI.DocumentViewerCreateOptions();

   // We will choose to use Elements Mode for this example, but you can disable it
   // Elements Mode can be styled with CSS - see the HTML for information
   createOptions.viewCreateOptions.useElements = true;
   createOptions.thumbnailsCreateOptions.useElements = true;

   // Set thumbnailsContainer to #thumbnails
   createOptions.thumbnailsContainer = document.getElementById("thumbnails");
   // Set viewContainer to #documentViewer
   createOptions.viewContainer = document.getElementById("documentViewer");

   createOptions.bookmarksContainer = document.getElementById("bookmarks");

   // Create the document viewer
   this.documentViewer = lt.Documents.UI.DocumentViewerFactory.createDocumentViewer(createOptions);

   // Set interactive mode to Pan / Zoom
   this.documentViewer.commands.run(lt.Documents.UI.DocumentViewerCommands.interactivePanZoom);

   // We prefer SVG viewing over Image viewing for this example
   this.documentViewer.view.preferredItemType = lt.Documents.UI.DocumentViewerItemType.svg;
   // To use Image: lt.Documents.UI.DocumentViewerItemType.image;

   // Change our thumbnails to be centered horizontally in the provided container
   //this.documentViewer.thumbnails.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center;

   // Before we call the service, we need to explain where it is ("localhost:19000/api", for example):
   lt.Documents.DocumentFactory.serviceHost = "http://localhost:19000"; // or wherever your host is
   lt.Documents.DocumentFactory.servicePath = ""; // the path to the root of the service, which is nothing for this example
   lt.Documents.DocumentFactory.serviceApiPath = "api"; // Routing occurs at "/api", unless you change the routing in the DocumentsService

   /* A quick example with a different service location:
    * > client: http://localhost:123
    * > service: https://www.leadtools.com/path/to/service
    * > service routing namespace: /api
    * 
    * Set these properties with these values:
    * serviceHost = "https://www.leadtools.com";
    * servicePath = "path/to/service";
    * serviceApiPath = "api"
    */

   // Load a PDF document
   var url = "https://demo.leadtools.com/images/pdf/leadtools.pdf";

   // Call the "LoadFromUri" and pass success and failure callbacks to the promise
   lt.Documents.DocumentFactory.loadFromUri(url, null)
      .done((document) => {
         // Set the document in the viewer
         showStructure(document);
         this.documentViewer.setDocument(document);
      })
      .fail((jqXHR, statusText, errorThrown) => {
         // Get more information from LEADTOOLS
         var serviceError = lt.Documents.ServiceError.parseError(jqXHR, statusText, errorThrown);
         lt.LTHelper.log(serviceError);

         // Show an alert about what the issue is
         var lines = [];
         lines.push("Document Viewer Error:");
         lines.push(serviceError.message);
         lines.push(serviceError.detail);
         lines.push("See console for details.")
         alert(lines.join("\n"));
      });
}

function showStructure(doc) {
   if (!doc.isStructureSupported) {
      // This document does not support table of content or links 
      return;
   }
   if (doc.structure.isParsed) {
      // Show them 
      var bookmarks = doc.structure.bookmarks;
      for (var i = 0; i < bookmarks.length; i++) {
         this.showBookmark(bookmarks[i], "");
      }
   }
   else {
      // We support it, but we dont have it parsed yet, do it now 
      doc.structure.parse()
         .done(function (doc) {
            console.log("Document structure was parsed succesfully");
            // Show the structure, this time doc.isStructureParsed is true and will not call 
            // the command again 
            showStructure(doc);
         });
   }
}

function showBookmark(bookmark, indent) {
   console.log(indent + "page:" + bookmark.target.pageNumber + " title '" + bookmark.title + "'");
   for (var i = 0; i < bookmark.children.length; i++) {
      showBookmark(bookmark.children[i], indent + "  ");
   }
}


The HTML5 Document Viewer demo parses the structure by calling the back end service in doc.structure.parse(). The code for the backend service can be found in StructureController.cs. It is hard to say exactly why the bookmarks are not working in your application without having your application itself to reproduce it, but you should be able to use our Tutoral1 demo and the code from the link you provided to get it working in the demo to compare with your application.

If you are still not able to get the bookmarks working in your application after following the steps above and comparing the Tutorial1 to your application, would you be able to provide us with a small sample application that reproduces the issue? If we can reproduce the issue on our end then we can certainly move forward with helping you figure out exactly what may be going wrong in your application and find you a solution.


 
#4 Posted : Tuesday, August 15, 2017 4:01:30 PM(UTC)
Duncan Quirk

Groups: Registered, Tech Support, Administrators
Posts: 45

Was thanked: 3 time(s) in 3 post(s)

Hello,

When you first create an instance of the DocumentViewer, a TreeView object will be created. This is the control that handles bookmark related events within the Document Viewer such as mouse/touch and keyboard events. The bookmarks should be located in this object once the SetDocument method has been called. This property can be retrieved from the DocumentViewerBookmarks object, which can be acquired by calling the DocumentViewer.bookmarks.

Our documentation on how LEADTOOLS handles bookmarks can be found here:
https://www.leadtools.co...mentviewerbookmarks.html

Our documentation regarding the treeView property can be found here:
https://www.leadtools.co...rbookmarks-treeview.html

Duncan Quirk
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
thanks 1 user thanked Duncan Quirk for this useful post.
sepideh on 8/16/2017(UTC)
 
#5 Posted : Wednesday, August 16, 2017 4:42:32 AM(UTC)

sepideh  
sepideh

Groups: Registered
Posts: 6

Thanks: 4 times

Thank you for your reply,I read those links u sent to me....But it seems that I already added the codes which are required for loading a bookmark,
when I want to create a documentviewer I add this line:

createOptions.bookmarksContainer = document.getElementById("bookMarkDiv");

and before setting document into documentViewer I add 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
$("#bookMarkDiv").prop("disabled", !e.isPostOperation);
}
});

according to example in below link,it seems that no more code is required,besides as I said in my last post I can see bookmark structure in console.....So can u please tell me what I missed which prevent this bookmark from loading?....any guess?....I also checked it with several browers but nothing happened.
https://www.leadtools.co...oxui/documentviewer.html


best Regards




Originally Posted by: Duncan Quirk Go to Quoted Post
Hello,

When you first create an instance of the DocumentViewer, a TreeView object will be created. This is the control that handles bookmark related events within the Document Viewer such as mouse/touch and keyboard events. The bookmarks should be located in this object once the SetDocument method has been called. This property can be retrieved from the DocumentViewerBookmarks object, which can be acquired by calling the DocumentViewer.bookmarks.

Our documentation on how LEADTOOLS handles bookmarks can be found here:
https://www.leadtools.co...mentviewerbookmarks.html

Our documentation regarding the treeView property can be found here:
https://www.leadtools.co...rbookmarks-treeview.html



 
#6 Posted : Wednesday, August 16, 2017 11:43:29 AM(UTC)
Duncan Quirk

Groups: Registered, Tech Support, Administrators
Posts: 45

Was thanked: 3 time(s) in 3 post(s)

Hello,

The code snippet in the tutorial you linked showcases how to setup the structure of the HTML5 Document Viewer. For the purposes of the tutorial, it is directing you to place your bookmarks within the right-panel div. You would need to place your bookmarks into that DIV if you wish to display them.

In the HTML5 Document Viewer demo, this is how the bookmarks are added to the displaying DIV:
Code:

private populateBookmarks(structure: lt.Documents.DocumentStructure): void {

            this.clearBookmarks();

            var list = document.getElementById("bookmarksTree");
            if (list) {

               if (structure != null && structure.bookmarks != null) {
                  var bookmarks = new Array<lt.Documents.DocumentBookmark>(structure.bookmarks.length);
                  for (var i = 0; i < structure.bookmarks.length; i++)
                     bookmarks[i] = structure.bookmarks[i];

                  this.addBookmarks(bookmarks, list);
               }
            }
         }

private addBookmarks(bookmarks: lt.Documents.DocumentBookmark[], baseElement: HTMLElement): void {
            if (bookmarks == null)
               return;

            for (var i = 0; i < bookmarks.length; i++) {
               var titleElement: HTMLElement = document.createElement("li");

               if (i + 1 == bookmarks.length)
                  lt.LTHelper.addClass(titleElement, "last");

               // If bookmark has children, add collapse/expand checkbox
               if (bookmarks[i].children.length > 0) {
                  lt.LTHelper.addClass(titleElement, "hasChildren");
                  var checkbox = document.createElement("input");
                  checkbox.type = "checkbox";
                  // Create unique id for the checkbox
                  checkbox.id = (bookmarks[i].title + Date.now().toString()).replace(/\s/g, '');
                  // Create checkbox label
                  var checkboxLabel = document.createElement("label");
                  checkboxLabel.setAttribute("for", checkbox.id);
                  titleElement.appendChild(checkbox);
                  titleElement.appendChild(checkboxLabel);
               }

               // Create title span
               var titleSpan = document.createElement("span");
               titleSpan.textContent = bookmarks[i].title;
               lt.LTHelper.addClass(titleSpan, "bookmark");
               // attach current bookmark as data to the title span
               $(titleSpan).data("bookmark", bookmarks[i])
               titleElement.appendChild(titleSpan);
               baseElement.appendChild(titleElement);
               // handle click event, to go to the selected bookmark
               // using the attached data
               titleSpan.onclick = (e: MouseEvent) => this.titleSpan_Click(e);

               var parentElement = titleElement;
               if (bookmarks[i].children.length > 0) {
                  parentElement = <HTMLElement>document.createElement("ul");
                  titleElement.appendChild(parentElement);
               }
               this.addBookmarks(bookmarks[i].children, parentElement);
            }
         }

private titleSpan_Click(e: MouseEvent): void {
            // Get attached data
            var bookmark = <lt.Documents.DocumentBookmark>$(e.currentTarget).data("bookmark");
            this._documentViewer.gotoBookmark(bookmark);
         }


The source for the HTML Document Viewer demo can be found in the following installation path: C:\LEADTOOLS 19\Examples\JS\Documents\DocumentViewer\Clients
The code snippet I linked can be found specifically in the Main.ts file which can be found in the following subdirectory of the DocumentViewer Project:
Apps\App1\ts\Main\Main.ts

As Aaron mentioned before, the HTML5 Document Viewer demo has to parse the structure before you can retrieve the bookmarks -- using the code snippet that Aaron posted earlier, you should be able to check to see if the document has been parsed already. If the structure has already been parsed, then you would need to add those bookmarks into whatever DIV you would like to display them in. For the purposes of the tutorial you referred to, you would need to add the list of bookmarks to the right-panel.
Duncan Quirk
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
 
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Powered by YAF.NET | YAF.NET © 2003-2017, Yet Another Forum.NET
This page was generated in 0.394 seconds.