Custom HTML PDF annotations using JavaScript

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

3
// Node creation helper, it returns a new `div` with the provided class name,
4
// and appends the html content to it if provided, plus an icon for signature fields.
5
const createNode = (html, className) => {
6
  const div = document.createElement("div");
7

8
  div.className = className;
9

10
  if (!html) {
11
    return div;
12
  }
13

14
  // Only the signature widget nodes use the icon
15
  div.innerHTML = html;
16

17
  const container = document.createElement("div");
18

19
  container.appendChild(div);
20

21
  const divIcon = document.createElement("div");
22

23
  divIcon.className = "signatureIcon";
24
  divIcon.innerHTML =
25
    '<div><img src="customize-annotations/static/signature.svg" style="height: 100%; width: auto" /></div>';
26
  container.appendChild(divIcon);
27

28
  return container;
29
};
30

31
const renderConfigurations = {};
32

33
const getAnnotationRenderers = ({ annotation }) => {
34
  // Use cached render configuration
35
  if (renderConfigurations[annotation.id]) {
36
    return renderConfigurations[annotation.id];
37
  }
38

39
  switch (true) {
40
    case annotation.formFieldName === "Signature Provider 2":
41
      renderConfigurations[annotation.id] = {
42
        // DOM node to be rendered along, or instead of, the normal annotation appearance.
43
        node: createNode(
44
          '<img src="customize-annotations/static/sign-here-right.svg" />',
45
          "signHereRight"
46
        ),
47
        // Optional, default: false. Set to true if the node should be appended instead of replacing the normal annotation appearance.
48
        append: true,
49
      };
50
      break;
51
    case annotation.formFieldName === "Signature Provider 3":
52
      renderConfigurations[annotation.id] = {
53
        node: createNode(
54
          '<img src="customize-annotations/static/sign-here-left.svg" />',
55
          "signHereLeft"
56
        ),
57
        append: true,
58
      };
59
      break;
60
    case annotation instanceof PSPDFKit.Annotations.WidgetAnnotation:
61
      renderConfigurations[annotation.id] = {
62
        node: createNode(null, "emptyField"),
63
        append: true,
64
      };
65
      break;
66
    default:
67
      renderConfigurations[annotation.id] = {
68
        node: createNode(null, ""),
69
        append: true,
70
      };
71
  }
72

73
  return renderConfigurations[annotation.id] || null;
74
};
75

76
export function load(defaultConfiguration) {
77
  // Add a callback to the 'Annotation' key in the `customRenderers` configuration field to customize
78
  // the annotation's appearance by adding a DOM node to it (or replacing the annotation's content
79
  // entirely wit the node).
80
  const customRenderers = {
81
    Annotation: getAnnotationRenderers,
82
  };
83

84
  return PSPDFKit.load({
85
    ...defaultConfiguration,
86
    styleSheets: ["/customize-annotations/static/style.css"],
87
    customRenderers,
88
  }).then((instance) => {
89
    instance.addEventListener("formFieldValues.update", (formFields) => {
90
      for (let i = 0; i < instance.totalPageCount; i++) {
91
        instance.getAnnotations(i).then((annotations) => {
92
          annotations.forEach((annotation) => {
93
            const formField = formFields.find(
94
              (formField) => annotation.formFieldName === formField.name
95
            );
96

97
            if (formField) {
98
              getAnnotationRenderers({ annotation }).node.className =
99
                formField.value == null ? "emptyField" : "filledField";
100
            }
101
          });
102
        });
103
      }
104
    });
105

106
    return instance;
107
  });
108
}