Section:

Creating user-defined bookmarks in WebViewer

WebViewer allows users to create bookmarks for each page. When clicked, these bookmarks will navigate to the saved page. In order to persist these bookmarks, WebViewer can easily export them. They can then be saved to a server. See our user-defined bookmarks demo to try it out.

Apryse Docs Image

You can enable bookmarks by enabling the following elements. The rest of this guide will demonstrate a ready to go sample and how you can export them.

JavaScript (v6.0+)

1WebViewer(...)
2  .then(instance => {
3    instance.enableElements(['bookmarksPanel', 'bookmarksPanelButton']);
4  });

Related Links

Prerequisites

Initial setup

Clone from the sample. The directory should look something like this:

HTML

1webviewer-user-bookmarks-nodejs-sample
2├── ...
3├── package.json
4├── README.md
5├── client
6│   ├── lib
7│   │    ├── ...
8│   ├── index.html
9│   ├── index.js
10│   └── webviewer-demo.pdf
11└── server
12    ├── bookmarks
13    │    ├── ...
14    ├── bookmarksHandler.js
15    └── serve.js

How to run

  1. Navigate to the extracted sample folder and install the required dependencies to run the samples by executing:

sh

1npm install
  1. Next run the sample by executing:

sh

1npm start

You should see a message that reads:

sh

1...
2Server is listening at http://localhost:3000/client/index.html
  1. Navigate to http://localhost:3000/client/index.html and you will see the sample WebViewer. Open the left panel and navigate to the last tab to see bookmarks. You should see the same bookmarks as the image above.

Import and Exporting Bookmarks

The webviewer instance contains the functions exportBookmarks and importBookmarks. You can use these along with AJAX requests to save and load the user bookmark data from a server, and setup the server to write and read XFDF files.

To save user bookmarks, the sample, uses POST and GET requests. In the sample you will find fetch request that are similar to the following:

JavaScript (v6.0+)

1WebViewer(...)
2  .then(function(instance) {
3    // load the user bookmarks data for id 'doc123'
4    fetch('/server/bookmarksHandler.js?documentId=doc123', {
5      method: 'GET'
6    }).then(function(response) {
7      if (response.status === 200) {
8        response.text().then(function(bookmarksString) {
9          // {"0":"Bookmark 1","2":"Bookmark 2"}
10          const bookmarks = JSON.parse(bookmarksString);
11          instance.importBookmarks(bookmarks);
12        });
13      }
14    });
15
16    // ...
17    // later save the annotation data for doc123
18    const bookmarks = instance.exportBookmarks();
19    const bookmarksString = JSON.stringify(bookmarks);
20    fetch('/server/bookmarksHandler.js?documentId=doc123', {
21      method: 'POST',
22      body: bookmarksString // written into a json file on server
23    });
24  });

Related Links

To automatically save user bookmark changes you are able to listen to the userBookmarksChanged event. This event fires whenever there is any change to user bookmarks.

JavaScript (v6.0+)

1instance.iframeWindow.addEventListener('userBookmarksChanged', e => {
2  const bookmarks = e.detail;
3  const bookmarksString = JSON.stringify(bookmarks);
4  // ...save string to server
5});

The sample uses Node.js as a backend for fulling the POST and GET requests, but other backends can also be used.

Quick Bookmarking

WebViewer v8.8.0 introduced a convenient shortcut to quickly add or remove a bookmark. This API instance.UI.enableBookmarkIconShortcutVisibility() enables this feature and shows a bookmark icon near the top right of the page. If the page is already bookmarked, users will see an filled blue icon.

Creating a bookmark this way will automatically populate into the panel using the “Untitled” title. Users who have the left panel open on the bookmark tab can also toggle whether or not they want to see the bookmark icon on the page.

To disable this feature, use this API instance.UI.disableBookmarkIconShortcutVisibility().

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales