Save Signature value from angular frontend pdfviewer in backend on Signaturefield

[Marc Schwöbel]

Hi,

i want to only send the value of a signature field to the server and then draw/add/write it on the pdf file and sign it.

On my frontend its easy to get the different signature data:

how can i draw this data (or add image/text) to an existing signature field on the server side?

Thanks for your help.

[Chinnamunia Karthik Chinna Thambi]

Hi Marc,

Please refer the below documentation for adding a signature to an existing signature field on the server side.

 

https://help.syncfusion.com/file-formats/pdf/working-with-forms#filling-the-signature-field

[Marc Schwöbel]

Hi,

thanks for your reply.

Yeah ive found in the samples and documentations how i can add a value. But lets say i have this data from the frontend send to the server:

        string data = "M320,93 L320,93 L320,91 L320,88 L318,88 L315,88 L315,86 L313,83 L310,83 L308,83 L305,81 L303,81 L300,78 L298,78 L293,78 L290,76 L285,76 L283,76 L278,73 L275,73 L270,73 L265,73 L260,73 L255,73 L250,71 L248,71 L243,71 L238,71 L233,71 L228,71 L225,71 L220,71 L215,71 L210,71 L205,71 L203,71 L198,71 L195,71 L190,71 L188,71 L185,71 L183,71 L180,73 L178,73 L175,73 L173,73 L170,75 L170,78 L168,78 L168,80 L165,80 L165,83 L165,85 L163,88 L163,90 L163,93 L163,95 L163,98 L160,100 L160,105 L160,108 L158,110 L158,115 L158,120 L158,123 L158,128 L155,130 L155,133 L155,138 L155,140 L155,143 L155,145 L155,148 L155,153 L155,155 L155,158 L155,160 L155,163 L155,165 L155,168 L155,170 L155,173 L155,175 L155,178 L155,180 L155,183 L157,183 L157,185 L157,188 L157,190 L160,190 L160,193 L160,195 L160,198 L162,198 L162,200 L162,203 L165,203 L167,203 L167,205 L170,205 L172,205 L175,205 L177,205 L180,205 L182,208 L185,208 L187,208 L190,208 L192,210 L195,210 L197,210 L200,210 L202,213 L205,213 L207,213 L210,213 L212,213 L215,213 L220,213 L222,213 L225,213 L227,213 L230,213 L232,213 L235,213 L237,213 L240,213 L242,213 L245,213 L247,213 L250,211 L252,211 L255,208 L257,208 L260,206 L262,206 L265,206 L267,203 L267,201 L270,201 L272,198 L275,198 L275,196 L277,196 L280,193 L282,191 L285,191 L285,188 L285,186 L287,186 L287,183 L290,183 L290,181 L292,178 L292,176 L292,173 L295,173 L295,171 L295,168 L297,166 L297,163 L297,161 L297,158 L297,156 L297,153 L297,151 L297,148 L297,146 L297,143 L297,141 L297,138 L297,136 L297,133 L297,131 L297,128 L297,126 L295,126 L295,123 L295,121 L293,118 L293,116 L290,113 L290,111 L288,111 L288,108 L285,106 L283,103 L283,101 L280,101 L278,98 L278,96 L275,96 L273,93 L270,93 L270,91 L268,91 L265,88 L263,86 L260,86 L258,86 L255,86 L255,83 L253,83 L250,83 L248,83 L245,83 L243,83 L240,83 L240,85 L238,85 L235,85 L235,88 L233,88 L230,88 L230,90 L228,90 L225,93 L223,93 L223,95 L220,95 L220,98 L218,98 ";
        var boundsX = 419.5417698019802m;
        var boundsY = 53.36123143564356m;
        var boundsWith = 19.603960396039604m;
        var boundsHeight = 16.871287128712872m;

how can i draw this on a signature field?

thanks.

[Chinnamunia Karthik Chinna Thambi]

Hi Marc,

It is not possible to add the path signature on the server-side. However, you can achieve this by converting the path into a base64 string and then add it to the signature field. Below are the steps and corresponding code snippet for implementing a path signature:

Angular sample: https://stackblitz.com/edit/angular-1hmm3c?file=src%2Fapp.component.html,src%2Fapp.component.ts

Web service sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Base64ToImage1787295557.zip

Steps to add the path signature:

• Run the web service sample and then run the angular sample.
• Click the "AddSignature" button. The provided path signature is converted into a base64 string, sent to the server-side, and added to the signature field.
• Additionally, we have reloaded the updated PDF in the PDF Viewer using the "viewer.load()" method.

If you have any concerns, please share your specific requirement for adding the signature on the server-side. This will be helpful for us to check in our end.