How can I pass in a bookmark/outline entry and navigate to it?

Technical Support
1

**Which product are you using?**PDF.js Express Viewer

PDF.js Express Version
8.7.0 build ‘Ny8yMC8yMDIyfDJhMWM5ZWYwOA==’

Detailed description of issue
I’m using the PDF.js Express Viewer in an Angular app. When the user goes to url/bookmark I want to to the pdf/bookmark I want the pdf to go to that bookmark.

I’m grabbing the /bookmark and assigning it to a local variable successfully, but when I pass that to the displayBookmark() function I’m getting an error. I’m actually not super sure what object has the displayBookmark() function on it.

I want to clarify, are the items I see in the outline panel bookmarks?

Expected behaviour
Document would navigate to the correct outline item, the same way it does when I click on an outline item.

In the browser I’m getting the following error: TypeError: Aa.isValid is not a function

Does your issue happen with every document, or just one?
Same behavior in the Angular demo project with the default document provided. However the default doc doesn’t seem to have any entries in outline, and it has other errors, so I’m not sure if that would work anyway.

Link to document
I can’t share it publicly because of NDA, but I could potentially send a link directly.

Code snippet
I’ve tried
`const { documentViewer } = instance.Core;
documentViewer.addEventListener(‘documentLoaded’, () => {

    documentViewer.displayBookmark('Profile');
  });`

based on another post in this forum.
I think it should be Core.DocumentViewer.displayBookmark('Profile') or Core.documentViewer.displayBookmark('Profile'); however based on the docs and logging the Core object in the console.

I thought that perhaps I was calling it too soon and the document wasn’t initialized, so I tried it in the ngAfterViewInit lifecycle hook, and I also tried it in the wvDocumentLoadedHandler, which I assume runs after the document is fully loaded. I also added to a click event listener and clicking to fire it after the document is fully loaded

3

Hi Alexb,

The displayBookmarks API requires a Bookmark object to be passed to it.
Please refer to the documentation for the API here:
https://www.pdftron.com/api/web/Core.DocumentViewer.html#displayBookmark__anchor

Here is some example usage:

documentViewer.addEventListener('documentLoaded', () => {
  documentViewer.displayBookmark(documentViewer.getDocument().getBookmarks()[0]);
});

Best Regards,
Ahmad Moaaz
Software Developer
PDFtron Systems Inc.


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

1 Like
4

Thank you @amoaaz that worked. And thank you for your quick response.