Handwritten Signature in AngularJS PDF Viewer

15 Jul 20223 minutes to read

We have provided the support for adding handwritten signature into the PDF document. The handwritten signature support reduces the paper work of reviewing the content and verify it digitally.

The ejPdfViewer has an option in the toolbar settings to enable/disable the signature button in the default toolbar.

The below code snippet describes how to show only the signature tool in the component.

<html ng-app="syncApp">
    <title>Handwritten Signature - PDF viewer</title>
    <!-- Add Scripts and CSS for rendering Essential JS components -->
    <link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-3.0.0.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
    <script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script>
    <script src="http://cdn.syncfusion.com/24.2.3/js/common/ej.widget.angular.min.js"></script>
    <div ng-controller="PDFViewerController">
        <div id="pdfviewer" style="width: 100%;height:680px" ej-pdfviewer e-serviceurl="serviceurl" e-toolbarsettings="toolbarsettings" ></div>
angular.module('syncApp', ['ejangular']).controller('PDFViewerController', function($scope) {
    $scope.serviceurl = 'http://js.syncfusion.com/ejservices/api/PdfViewer';
    $scope.toolbarsettings = {
        toolbarItem: ej.PdfViewer.ToolbarItems.SignatureTool

Drawing and adding signature in the PDF document

The handwritten signature can be added by drawing the signature content in the signature panel and on clicking the button labeled ADD, the signature will be added in the PDF documents. The following screenshots are pictorial representation of this.

AngularJS PDF Viewer Signature

AngularJS PDF Viewer handwritten Signature

AngularJS PDF Viewer Move Resize and Delete the Handwritten Signature

Move, Resize and Delete the Handwritten Signature

The handwritten signature content can be moved to the specified location within the page bounds by using touch gestures, arrow keys and mouse. We can also resize the handwritten signature content with maintaining aspect ratio.

The selected handwritten signature content can be deleted using the “Delete” option in the context menu or delete key. The following screenshots are pictorial representation of this.

AngularJS PDF Viewer Delete option

Changing Handwritten Signature properties

The properties (i.e. opacity and color) of a handwritten signature can be modified by color palate and opacity slider which is available in the “Properties” option in context menu. The following screenshots are pictorial representation of this.

AngularJS PDF Viewer Properties

Select the desired color from the color palette and then click on OK button.

AngularJS PDF Viewer desired color

The selected color will be updated on the signature.

AngularJS PDF Viewer updated signature

You can also change the opacity of the added signature in the “properties” option.

AngularJS PDF Viewer added signature

Saving the Signature

The added signature can be saved to the PDF document and can be downloaded by clicking the download button in the toolbar. This action will not affect the original document

AngularJS PDF Viewer Saving the Signature