HelpBot Assistant

How can I help you?

Add signature in React PDF Viewer component

The PDF Viewer library allows adding a signature to a signature field in a loaded PDF document programmatically by handling the formFieldClick event.

Follow these steps

  1. Follow the Syncfusion getting-started guide for React PDF Viewer.
  2. Add the following code snippet to handle signature field clicks and set or clear the signature value.
<PdfViewerComponent
    id="container"
    documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"
    resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/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);
              }
            }
          }
        });
      }
    }
  }
<PdfViewerComponent
    id="container"
    documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"
    serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/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