Bookmarks

Bookmarks provide a quick way to jump to pages or trigger other actions, like opening a web page. In PSPDFKit for Web, you can open a list of bookmarks for the current PDF in the sidebar, as shown below.

Bookmark bar

It’s possible to create bookmarks both in the sidebar and in your JavaScript code.

Bookmarking a Page

Intuitively, you might think of a bookmark as a reference to a page of your PDF document. And in fact, this is the kind of bookmark you can create in the sidebar.

New bookmark form

Here is how to create the same bookmark in JavaScript:

Copy
1
2
3
4
5
6
const bookmark = new PSPDFKit.Bookmark({
  name: "test bookmark",
  action: new PSPDFKit.Actions.GoToAction({ pageIndex: 3 })
});

instance.createBookmark(bookmark);

In this example, we create a bookmark with a GoToAction. There are several other actions you can use with bookmarks. These are described in the PDF Actions guide.

Linking to URIs

Using the URIAction, you can link to a website from your bookmarks:

Copy
1
2
3
4
5
6
7
8
const website = new PSPDFKit.Bookmark({
  name: "PSPDFKit website",
  action: new PSPDFKit.Actions.URIAction({
    uri: "https://pspdfkit.com"
  })
});

instance.createBookmark(website);

Managing Bookmarks

PSPDFKit provides several methods for managing bookmarks. We already used instance.createBookmark in the examples above. You can list existing bookmarks with instance.getBookmarks and update them with instance.updateBookmark:

Copy
1
2
3
4
5
6
7
8
9
async function bookmarksToUppercase() {
  const bookmarks = await instance.getBookmarks();
  const uppercasedBookmarks = bookmarks.map(bookmark =>
    bookmark.set("name", bookmark.name.toUpperCase())
  );
  await Promise.all(
    uppercasedBookmarks.map(bookmark => instance.updateBookmark(bookmark))
  );
}

You can also delete bookmarks using the instance.deleteBookmark method:

Copy
1
2
3
4
5
6
7
8
async function deleteFirstBookmark() {
  const bookmarks = await instance.getBookmarks();
  const firstBookmark = bookmarks.get(0);

  if (firstBookmark) {
    await instance.deleteBookmark(firstBookmark.id);
  }
}

Tracking Bookmark Changes

Managing bookmarks from your code or from the bookmarks sidebar will trigger events you can listen to. The BookmarksChangeEvent gets triggered whenever a bookmark is created, updated, or deleted:

1
2
3
instance.addEventListener("bookmarks.change", () => {
  console.log("Your bookmarks changed!");
});

If you want more information about how exactly a bookmark has changed, there are several other more fine-grained events you can listen to. You’ll find more details about this in the API docs: