Handwritten Signature

31 Oct 20232 minutes to read

The PDF Viewer control supports adding handwritten signatures to a PDF document. The handwritten signature reduces the paper work of reviewing the content and verifies it digitally.

The following code snippet describes how to enable the handwritten signature in PDF Viewer.

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                enableHandwrittenSignature="true">
    </ejs-pdfviewer>
</div>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                enableHandwrittenSignature="true">
    </ejs-pdfviewer>
</div>

Adding a handwritten signature to the PDF document

The handwritten signature can be added to the PDF document using the annotation toolbar.

  • Click the Edit Annotation button in the PDF Viewer toolbar. A toolbar appears below it.
  • Select the HandWritten Signature button in the annotation toolbar. The signature panel will appear.

HandWrittenSignature

  • Draw the signature in the signature panel.

SignaturePanel

  • Then click Create button and move the signature using the mouse and place them in the desired location.

SignatureAdded

Editing the properties of handwritten signature

The stroke color, border thickness, and opacity of the handwritten signature can be edited using the edit stroke color tool, edit thickness tool, and edit opacity tool in the annotation toolbar.

SignatureProperties

Refer to the following code snippet to set the default handwritten signature settings.

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                style="height:600px"
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                handWrittenSignatureSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerHandWrittenSignatureSettings {Opacity=0.5,StrokeColor="red",Thickness=3})">
    </ejs-pdfviewer>
</div>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                serviceUrl="/api/PdfViewer"
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                handWrittenSignatureSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerHandWrittenSignatureSettings {Opacity=0.5,StrokeColor="red",Thickness=3})">
    </ejs-pdfviewer>
</div>

See also