Persist ink signatures across instances

Q: How can I persist the ink signatures created so that when I refresh the page they still appear?

A: Ink signatures are not persisted in memory automatically by PSPDFKit for Web. This is something that needs to be implemented in whatever manner you’d like to.

One possibility is to store the ink signatures on the browser local storage and populate the list of ink signatures when an instance of PSPDFKit is loaded. To retrieve the ink signatures you can use the PSPDFKit.Instance#getInkSignatures and populate the list when loading with the PSPDFKit.Configuration#populateInkSignatures property.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const serializedSignatures = localStorage.getItem("signaturesSerialized");
const configuration = defaultConfiguration; // replace it with your configuration options

if (serializedSignatures) {
  const parsed = JSON.parse(serializedSignatures);
  const list = PSPDFKit.Immutable.List(
    parsed.map(PSPDFKit.Annotations.fromSerializableObject)
  );
  configuration.populateInkSignatures = () => list;
}

PSPDFKit.load(configuration).then(instance => {
  console.log("PSPDFKit for Web successfully loaded!!", instance);

  // we listen to any change creation/update/deletion of ink signatures
  instance.addEventListener("inkSignatures.change", async () => {
    const list = await instance.getInkSignatures();
    const serialized = list
      .map(PSPDFKit.Annotations.toSerializableObject)
      .toJS();
    localStorage.setItem("signaturesSerialized", JSON.stringify(serialized));
  });
  return instance;
});

You can enhance this further by, for instance, sending the serialized list of Ink Signatures to a server instead of keeping it persisted in the client’s storage. See our guide on storing signatures to learn more.

This has been tested with PSPDFKit for Web 2020.2.5.