Add signature in React Pdfviewer component

30 Jan 20233 minutes to read

The PDF Viewer library allows you to add signature in the signature field of the loaded PDF document programmatically using the formFieldClick event.

Step 1: Follow the steps provided in the link to create simple PDF Viewer sample in React.

Step 2: Add the following code snippet to add signature in signature field.

formFieldClick = { this.fieldClick }

fieldClick(args) {
  var viewer = document.getElementById('container').ej2_instances[0];
  if (viewer) {
    args.cancel = true;
    if (args.field.type === 'SignatureField') {
      var forms = viewer.formFieldCollections;
      forms.map(r => {
        if (r.id === args.field.id) {
          console.log(args.field.value);
          var el = document.getElementById(r.id);
          if (el) {
            if (el.style.textAlign !== 'center') {
              el.style.textAlign = 'center';
            }
            if (el.style.fontStyle !== 'italic') {
              el.style.fontStyle = 'italic';
            }
            if (el.style.fontWeight !== 'italic') {
              el.style.fontWeight = 'italic';
            }
            if (args.field.value !== '' && args.field.value) {
              args.field.value = '';
              viewer.updateFormFieldsValue(args.field);
            } else {
              args.field.signatureType = ['Type'];
              args.field.value = 'DA FIRMARE';
              args.cancel = true;
              viewer.updateFormFieldsValue(args.field);
            }
          }
        }
      });
    }
  }
}

Find the Sample how to add signature in signature field