Customize the PDF toolbar using JavaScript

1
import PSPDFKit from "@nutrient-sdk/viewer";
2

3
export function load(defaultConfiguration) {
4
  // Keep track of the current instance
5
  // so that we can use it inside of a toolbar item onPress callback.
6
  let instance = null;
7

8
  // Web SDK exposes the default list of items as PSPDFKit.defaultToolbarItems
9
  // This is an Array that can be filtered or customized as you please.
10
  const toolbarItems = PSPDFKit.defaultToolbarItems.filter((item) => {
11
    return /\b(sidebar-bookmarks|sidebar-thumbnails|zoom-in|zoom-out)\b/.test(
12
      item.type
13
    );
14
  });
15

16
  toolbarItems.push({
17
    type: "spacer",
18
  });
19

20
  // A custom item. Inside the onPress callback we can call into Nutrient APIs.
21
  toolbarItems.push({
22
    type: "custom",
23
    id: "my-custom-button",
24
    title: "click me",
25
    onPress: function () {
26
      alert(
27
        "Hello from Nutrient " +
28
          PSPDFKit.version +
29
          "\nYou are at page " +
30
          instance.viewState.currentPageIndex
31
      );
32
    },
33
  });
34

35
  toolbarItems.push({
36
    type: "search",
37
  });
38

39
  return PSPDFKit.load({
40
    ...defaultConfiguration,
41
    toolbarItems: toolbarItems,
42
  }).then((newInstance) => {
43
    instance = newInstance;
44
  });
45
}