Add electronic signatures to PDFs using JavaScript

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

3
let instance = null;
4

5
export function load(defaultConfiguration) {
6
  return PSPDFKit.load({
7
    ...defaultConfiguration,
8
    // This function gets invoked when the document is loaded and expects a list
9
    // of ink annotations as return value.
10
    populateInkSignatures() {
11
      // We retrieve our previously stored ink annotations from localStorage
12
      // and return them as a PSPDFKit.Immutable.List.
13
      // This will populate the signature selection for our users.
14
      const signatureJSON = localStorage.getItem("inkSignatures");
15
      const signatures = signatureJSON ? JSON.parse(signatureJSON) : [];
16

17
      return PSPDFKit.Immutable.List(
18
        signatures.map(PSPDFKit.Annotations.fromSerializableObject)
19
      );
20
    },
21
    toolbarItems: defaultConfiguration.toolbarItems.reduce((acc, item) => {
22
      if (item.type === "export-pdf") {
23
        return acc.concat([
24
          {
25
            type: "custom",
26
            title: "Download",
27
            onPress: async () => {
28
              const pdf = await instance.exportPDF({
29
                flattenElectronicSignatures: true,
30
              });
31
              const blob = new Blob([pdf], { type: "application/pdf" });
32
              const url = URL.createObjectURL(blob);
33
              const a = document.createElement("a");
34
              a.href = url;
35
              a.download = "document.pdf";
36
              a.click();
37
              URL.revokeObjectURL(url);
38
            },
39
          },
40
        ]);
41
      }
42

43
      return acc.concat([item]);
44
    }, []),
45
  }).then((_instance) => {
46
    instance = _instance;
47

48
    // Whenever an ink signature is added, updated or deleted, we update the
49
    // signatures stored in localStorage.
50
    instance.addEventListener("inkSignatures.change", async () => {
51
      const signatures = await instance.getInkSignatures();
52
      const signaturesJSON = JSON.stringify(
53
        signatures
54
          .map((signature) =>
55
            PSPDFKit.Annotations.toSerializableObject(signature)
56
          )
57
          .toJS()
58
      );
59

60
      localStorage.setItem("inkSignatures", signaturesJSON);
61
    });
62

63
    return instance;
64
  });
65
}