Syncfusion PDF Viewer integration with Topaz Signature Pad

[Bruce]

I am working on a project to integrate PDF Viewer (React) with Topaz Signature Pad.

According to topaz web demo, there are two events that require integration. One is the "Sign" button event that will start Topaz service, the other one is "Done" button event that will generate signature data and stop Topaz service.

I read the Syncfusion PDF Viewer documents and it seems there is no available API to use for the integration. So I tried to use customized toolbar to create my own button in PDF Viewer to start Topaz service. Below is my idea:

1. Click on the customize button will popup a window for user to sign, 
2. A "Create" button in the bottom of popup window to get signature data and end Topaz service
3. Place the signature data into PDF

Now I am stuck at step 3, can you please help me on this?

Below is the PDF Viewer built-in UI to add signature, upon click Create button, I am able to place the signature into PDF, so how to do it in my customized button event? 

[Vasugi Sivajothi]

Hi Bruce, 

 

Thank you for contacting Syncfusion support. 

 

Syncfusion PDF Viewer control does not have support to access the create option in the signature panel using the external tools. We have handled this functionality internally in our source, so we can’t be able to access this option. Sorry for the inconvenience.  

 

And there is no support for events or API to get the actions that are performed using the external tools. However, The PDF Viewer has its own signature dialog where you can use the setAnnotationMode method to open the PDF Viewer signature dialog, and then you can sign in to the PDF document. And you can use the addSignature event to get the base64 string of the signature which you have drawn in the PDF document. We have shared the code snippet and sample for your reference.  

  

  

Code snippet to open the signature dialog:  

  

    <button id="openSignatureDialog">openSignatureDialog</button>  

  

  

document.getElementById('openSignatureDialog').addEventListener('click', () => {  

  viewer.annotationModule.setAnnotationMode('HandWrittenSignature');  

});  

  

  

  

  

Code snippet to trigger the addSignature event after signed the document:  

  

viewer.addSignature = (args) => {  

  console.log('Signature base64 string is ' + args.data);  

};  

  

  

 

Online Demo: https://ej2.syncfusion.com/demos/#/material/pdfviewer/hand-written.html   

  

  

Sample: https://stackblitz.com/edit/h4oitd?file=index.ts   

 

 

Please let us know if you have any concerns about this. 

 

Regards, 

Vasugi. 

[Bruce]

Hi Vasugi,

Thank you for the code snippet. I managed to launch PDF Viewer signature dialog and display signature from Topaz Signature Pad. However, the create button is grey out (refer to below screenshot). I guess it is because I use document.getElementById('pdfcontainer_signatureCanvas_') to access the canvas in the dialog to allow Topaz draw on the screen, but PDF Viewer internally does not detect the change.

Do you have any idea on how to solve it?

[Vasugi Sivajothi]

Hi Bruce, 

  

 

Thank you for the update. As we mentioned earlier, we have handled create signature functionality internally in our source, so create option will only enable when drawing the signature on the canvas in the PDF Viewer signature panel. We have shared the video for your reference which can be downloaded from the below link. 

  

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video-484248392 

  

However, you can manually enable the create button using the below code snippet. 

  

Code Snippet: 

 

  var createbtn = document.getElementsByClassName('e-pv-createbtn')[0]; 

  createbtn.disabled = false; 

 

 

  

Kindly try this and revert to us with the code snippet of integration between PDF Viewer with Topaz Signature Pad and more details about your requirement if you have any concerns. This will be helpful to assist your better. 

  

 

Regards, 

Vasugi. 

[Bruce]

Hi Vasugi,

Thank you for the advise. I have tried to enable the Create button by modifying html directly in chrome DevTools, but Syncfusion return me an empty signature to place in PDF.

Below is the code snippet, I have also attached the full source code of Topaz library in the attachment for your reference.

// Import statement ...

const SyncfusionTest: React.FC = () => {

  const viewer = useRef<PdfViewerComponent>();

  const clickHandler = (args: ClickEventArgs) => {

    switch (args.item.id) {

      case 'sign_action':

        viewer.current?.annotationModule.setAnnotationMode('HandWrittenSignature');

// ... Code to preapare Topaz Siganture Pad

ctx = document.getElementById('pdfcontainer_signatureCanvas_').getContext('2d'); // This is the code to allow topaz draw on syncfusion signature panel

// .. Other Topaz setup

        break;

    }

  };

  return (

    <div>

      <div className="e-pdf-toolbar">

        <ToolbarComponent clicked={clickHandler}>

          <ItemsDirective>

            <ItemDirective

              prefixIcon="e-pv-open-document-icon"

              id="sign_action"

              tooltipText="Open"

            ></ItemDirective>

          </ItemsDirective>

        </ToolbarComponent>

      </div>

      <PdfViewerComponent

        ref={viewer}

        id="pdfcontainer"

        documentPath="PDF_Succinctly.pdf"

        serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"

        style={{ height: '640px' }}

        enableToolbar={false}

        enableNavigationToolbar={false}

      >

        <Inject

          services={[

            Toolbar,

            Magnification,

            Navigation,

            Annotation,

            LinkAnnotation,

            BookmarkView,

            ThumbnailView,

            Print,

            TextSelection,

            TextSearch,

            FormFields,

          ]}

        />

      </PdfViewerComponent>

    </div>

  );

};

export default SyncfusionTest;

Attachment: SourceCode_811979cb.zip

[Vasugi Sivajothi]

Hi Bruce,  

  

We have checked with the provided details and found that the reported issue is due to signature coordinates are empty while creating signature from the signature panel. As we mentioned earlier, we have handled the create signature functionality internally in our source, we will draw the signature in the canvas using the mouse position and get the X and Y coordinates of the mouse down position then we will create the signature based on that coordinate. So, we can’t be able to create a signature from external tools.  

  

However, currently, we have an option to add the signature programmatically in the signature field.  Please refer to the below code snippet and sample. 

  

To Update the signatures from code behind:  

  

Draw: 

  

var formField = viewer.retrieveFormFields(); 

formField[8]. signatureType = [SignatureType.Draw]; 

formField[8].value = ""; // Provide the path value. 

viewer.updateFormFieldsValue(formField[8]); 

  

Type: 

  

var formField = viewer.retrieveFormFields(); 

formField[8].signatureType =[SignatureType.Type];             

formField[8].value = "name"; // Provide the name 

formField[8].fontName = "Symbol"; 

viewer.updateFormFieldsValue(formField[8]); 

  

Image: 

  

var formField = viewer.retrieveFormFields(); 

formField[8].signatureType=[SignatureType.Image];            

formField[8].value = ""; // Provide the base64 string 

viewer.updateFormFieldsValue(formField[8]); 

  

  

  

  

Sample: https://stackblitz.com/edit/sr9qge-wbjeut?file=index.ts 

  

Demo: https://ej2.syncfusion.com/demos/#/material/pdfviewer/form-filling.html 

  

Kindly try this and revert to us with more details about your requirement if you have any concerns about this. This will be helpful to assist your better and provide a solution. 

  

Regards, 

Vasugi. 

[Bruce]

Hi Vasugi,

I managed to integrate Topaz Signature Pad with Syncfusion PDF Viewer by using the code you provided, thank you very much.

[Vasugi Sivajothi]

Hi Bruce,   

 

Thank you for your update. We are glad to hear that your requirement is achieved. Please revert to us if you need any further assistance. 

 

Regards, 

Vasugi.