Create custom overlays on PDFs using JavaScript

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

3
export function load(defaultConfiguration) {
4
  return PSPDFKit.load(defaultConfiguration).then((instance) => {
5
    console.log("Nutrient Web SDK successfully loaded!!", instance);
6

7
    // Every time a user clicks on the page, we show a custom overlay item on
8
    // this page.
9
    instance.addEventListener("page.press", (event) => {
10
      if (event.pageIndex === 0) {
11
        instance.setCustomOverlayItem(getOverlayItemForPage1());
12
      }
13

14
      if (event.pageIndex === 1) {
15
        instance.setCustomOverlayItem(getOverlayItemForPage2());
16
      }
17
    });
18

19
    return instance;
20
  });
21
}
22

23
function getOverlayItemForPage1() {
24
  // We create a div element with an emoji and a short text.
25
  const overlayElement = document.createElement("div");
26

27
  overlayElement.style.cssText =
28
    "width: 300px;background: #FFF; border: 1px #333 solid; font-family: sans-serif; font-size: 14px; padding: 20px;";
29
  overlayElement.innerHTML =
30
    "<p>👋 This is an overlay item that appears when clicking on the first page. Find out what happens when you click on the second page.";
31

32
  // Then we return a PSPDFKit.CustomOverlayItem which uses the overlayElement
33
  // that we created above as a node, the pageIndex we get from our onPress
34
  // event and define the position on the page.
35
  return new PSPDFKit.CustomOverlayItem({
36
    id: "overlay-item-first-page",
37
    node: overlayElement,
38
    pageIndex: 0,
39
    position: new PSPDFKit.Geometry.Point({ x: 300, y: 50 }),
40
  });
41
}
42

43
function getOverlayItemForPage2() {
44
  const overlayElement = document.createElement("div");
45

46
  // In this case we embedd a video to the page
47
  overlayElement.innerHTML =
48
    '<iframe src="https://player.vimeo.com/video/227250697" width="500" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
49

50
  // Then we return a PSPDFKit.CustomOverlayItem which uses the overlayElement
51
  // that we created above as a node, the pageIndex we get from our onPress
52
  // event and define the position on the page.
53
  return new PSPDFKit.CustomOverlayItem({
54
    id: "overlay-item-second-page",
55
    node: overlayElement,
56
    pageIndex: 1,
57
    position: new PSPDFKit.Geometry.Point({ x: 55, y: 220 }),
58
  });
59
}