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：

const signatureField = new Annotations.Forms.Field('Signature1', { type: 'Sig' });
const signatureWidget = new Annotations.SignatureWidgetAnnotation(signatureField, {
  PageNumber: 1,
  X: 102,
  Y: 136,
  Width: 59,
  Height: 20
});
annotationManager.getFieldManager().addField(signatureField);
annotationManager.addAnnotation(signatureWidget);

Continuously Create Signature Fields

To let a user draw multiple signature fields without reactivating the tool after every field, activate the signature field tool (Tools.ToolNames.SIG_FORM_FIELD) with continueAdding:

instance.UI.setToolMode(Tools.ToolNames.SIG_FORM_FIELD, {
  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：

// Read the certificate to get the name of the signer.
const { subject } = await annotationManager.getCertificateInfo(pkcs12.buffer, password)

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

// Write the data into the signature field. The appearance shows the content lines, with the text on the left.
// To sign the selected signature field, pass undefined instead of the annotation.
await annotationManager.sign(annotation, {
  certificate: pkcs12.buffer,
  password: password,
  appearance: {
    content,
    text: 'Text',
    isContentAlignLeft: false
  }
})