How to add signature with date and time in the signature field

Adding signature with date and time in the signature field

Description:

This article shows to add signature with date and time in the signature field in PDF Viewer.

Solution:

To add a signature with the current date and time in a PDF viewer, use TypeScript to handle the addSignature event. Implement logic for three signature types: text, image, and path-based. Update the corresponding form field with the processed signature data.

Code Snippets:

app.component.html

<div class="control-section">
    <div class="content-wrapper">
        <ejs-pdfviewer
            #pdfviewer
            id="pdfViewer"
            [documentPath]="document"
            (addSignature)="addSignature($event)"
            [resourceUrl]="resource"
            style="height:640px; display:block">
        </ejs-pdfviewer>
    </div>
</div>

app.component.ts

Text Signature

For text signatures, append the date to the provided text and update the form field.

public addSignature(args: AddSignatureEventArgs): void {
    if (this.id !== args.id) {
      this.id = args.id;
      if (args.type === 'SignatureText') {
        console.log(args);
        var formFieldCollections: any =
          this.pdfviewerControl.formFieldCollections;
        for (var x = 0; x < formFieldCollections.length; x++) {
          if (formFieldCollections[x].id + '_content' === args.id) {
            formFieldCollections[x].signatureType = 'Type';
            formFieldCollections[x].value =
              args.data + '\n' + new Date().toLocaleDateString();
            this.pdfviewerControl.updateFormFieldsValue(
              formFieldCollections[x]
            );
            break;
          }
        }
      }
    } else {
      this.id = '';
    }
  }

Image Signature

For image signatures, use a canvas element to draw the image and date, then save it as a data URL to the form field.

public addSignature(args: AddSignatureEventArgs): void {
    if (this.id !== args.id) {
      this.id = args.id;
      if (args.type === 'SignatureImage') {
        console.log(args);
        var c: any = document.createElement('CANVAS');
        var ctx = c.getContext('2d');
        var image = new Image();
        var proxy = this;

        image.onload = function () {
          var boundingElement = document.getElementById(args.id);
          if (boundingElement) {
            var bounds = boundingElement.getBoundingClientRect();
            c.width = bounds.width;
            c.height = bounds.height + 40;
          }

          ctx.drawImage(image, 0, 0, c.width, c.height - 40);
          var date = new Date().toLocaleDateString();
          ctx.font = '20px Helvetica';
          ctx.fillStyle = 'black';
          ctx.fillText(date, 10, c.height - 10);
          var imagedata = c.toDataURL('image/png');
          proxy.id = args.id;

          var formFieldCollections: any =
            proxy.pdfviewerControl.formFieldCollections;
          for (var x = 0; x < formFieldCollections.length; x++) {
            if (formFieldCollections[x].id + '_content' === args.id) {
              formFieldCollections[x].signatureType = 'Image';
              formFieldCollections[x].value = imagedata;
              proxy.pdfviewerControl.updateFormFieldsValue(
                formFieldCollections[x]
              );
            }
          }
        };
        image.src = args.data;
      }
    } else {
      this.id = '';
    }
  }

Path Signature

For path signatures, parse the drawing commands, scale them to fit the canvas, and append the date below the signature.

public addSignature(args: AddSignatureEventArgs): void {
    if (this.id !== args.id) {
      this.id = args.id;
      if (args.type === 'Path') {
        var canvas = document.createElement('canvas');
        var boundingElement = document.getElementById(args.id);

        if (boundingElement) {
          var bounds = boundingElement.getBoundingClientRect();
          canvas.width = bounds.width;
          canvas.height = bounds.height + 40;
        }

        var ctx: any = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        var drawValue = args.data.trim();
        var commands = drawValue.split(' ');

        let maxX = 0,
          maxY = 0;
        commands.forEach((command) => {
          if (command.startsWith('M') || command.startsWith('L')) {
            const [x, y] = command.slice(1).split(',').map(Number);
            if (x > maxX) maxX = x;
            if (y > maxY) maxY = y;
          }
        });

        const scaleX = canvas.width / maxX;
        const scaleY = (canvas.height - 40) / maxY;
        const scale = Math.min(scaleX, scaleY);

        ctx.beginPath();
        commands.forEach((command) => {
          if (command.startsWith('M')) {
            const [x, y] = command.slice(1).split(',').map(Number);
            ctx.moveTo(x * scale, y * scale);
          } else if (command.startsWith('L')) {
            const [x, y] = command.slice(1).split(',').map(Number);
            ctx.lineTo(x * scale, y * scale);
          }
        });
        ctx.stroke();

        const date = new Date().toLocaleDateString();
        ctx.font = '20px Helvetica';
        ctx.fillStyle = 'black';
        ctx.fillText(date, 10, canvas.height - 10);
        const imageData = canvas.toDataURL('image/png');

        const formFieldCollections: any =
          this.pdfviewerControl.formFieldCollections;
        for (let i = 0; i < formFieldCollections.length; i++) {
          if (formFieldCollections[i].id + '_content' === args.id) {
            formFieldCollections[i].signatureType = 'Image';
            formFieldCollections[i].value = imageData;
            this.pdfviewerControl.updateFormFieldsValue(
              formFieldCollections[i]
            );
          }
        }
      }
    } else {
      this.id = '';
    }
  }

Sample Link - https://stackblitz.com/edit/angular-iykefk-pe3t4f?file=src%2Fapp.component.html,src%2Fapp.component.ts

Conclusion:

I hope you enjoyed learning about How to add handwritten signature dynamically with signature image in PDF Viewer for Angular.

You can refer to Angular PDF feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular PDF Viewer example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!