Create Digital Signatures

Creating a digital signature involves two steps:

1. Create a Signature Field

2. Sign within the Signature Field

By following these two steps, you can either self-sign a document or invite others to sign within the signature field you've created.

Create a Signature Field

ComPDFKit offers support for customizing the styles of the signature form field and allows you to customize the appearance of your signature using drawn, image, and typed signatures.

This example shows how to create a signature field：

docViewer.addAnnotations({
  type: 'signatureFields',
  rect: {
    left: 102,
    top: 136,
    right: 161,
    bottom: 156
  },
  pageIndex: 0
});

Continuously Create Signature Fields

To let a user draw multiple signature fields without reactivating the tool after every field, activate the signatureFields tool with continueAdding:

UI.setActiveTool('signatureFields', {
  continueAdding: true
});

The default value is false, so existing calls retain the one-shot creation behavior. This option currently applies only to signature fields and does not enable continuous creation for other form-field tools.

Sign Within the Signature Field

To sign within the signature field, you need to do three things:

• Possess a certificate that conforms to the PKCS12 standard (in PFX or P12 format) and ensure that you know its password. You can create a compliant digital certificate using the built-in methods within the ComPDFKit SDK.

• Set the appearance of the digital signature.

• Write the data into the signature field.

This example shows how to sign within the signature field：

const { subject } = await docViewer.loadCertificates({
  pkcs12Buffer: pkcs12.buffer,
  password: password
})

const content = "Name: " + subject.CN + "\n" +
  "Date: " + date + "\n" +
  "Reason: "+ 'I am the owner of the document.' +" \n" +
  "Location: "+ location + "\n"

docViewer.handleSign({
    type: 1,
    flag: 'save',
    param: {
      annotation,
      content,
      text: 'Text'
      isContentAlginLeft: false
    },
    pkcs12Buffer: pkcs12.buffer,
    password: password
  })