Add signature in React Pdfviewer component

5 Jan 20248 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.

Standalone

<PdfViewerComponent
    id="container"
    documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"
    resourceUrl="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib"
    style={{ height: '640px' }}
    formFieldClick={fieldClick}>
    <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
                        ThumbnailView, Print, TextSelection, TextSearch, FormDesigner, FormFields ]} />
  </PdfViewerComponent>

  function 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);
              }
            }
          }
        });
      }
    }
  }

Server-Backed

<PdfViewerComponent
    id="container"
    documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"
    serviceUrl="https://services.syncfusion.com/react/production/api/pdfviewer"
    style={{ height: '640px' }}
    formFieldClick={fieldClick}>
    <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
                        ThumbnailView, Print, TextSelection, TextSearch, FormDesigner, FormFields ]} />
  </PdfViewerComponent>

  function 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