How to Export and Import Handwritten Signatures in PDF Viewer

How to Export and Import Handwritten Signatures in PDF Viewer

Description:

This article explains how to export and import handwritten signatures in the Angular PDF Viewer. It walks through the process of exporting annotations (including handwritten signatures) as a JSON object, and how to import them back into the PDF viewer.

Solution:

To achieve this, we use the exportAnnotationsAsObject method to export the handwritten signature annotations from the PDF viewer. Once exported, the data can be stored or transferred. Later, the data can be imported back into the viewer using the importAnnotation method, restoring the handwritten signatures.

Prerequisites:

Before diving into the implementation, ensure that the following steps are completed:

1. Syncfusion PDF Viewer Setup: Make sure the Syncfusion PDF Viewer is installed and set up in your Angular project. Follow the Getting Started with Syncfusion PDF Viewer for Angular guide if you haven’t already.
2. Basic Knowledge of Angular: Familiarity with Angular components and the basic setup of Angular projects will help you follow along with the implementation.

Code Snippets

app.component.ts

Import Necessary Modules

In your app.component.ts, import all necessary modules from Syncfusion’s PDF Viewer package:

import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
         MagnificationService, ThumbnailViewService, ToolbarService,
         NavigationService, TextSearchService, TextSelectionService,
         PrintService, FormDesignerService, FormFieldsService, 
         AnnotationService, PageOrganizerService, AnnotationResizerLocation, 
         CursorType, DisplayMode, FormFieldDataFormat, LoadEventArgs } from '@syncfusion/ej2-angular-pdfviewer';

Set Handwritten Signature Settings

Define your handwritten signature settings in the component. This allows you to customize the appearance and behavior of handwritten signatures, including color, size, opacity, and more.

public handWritten = {
  signatureItem: ["Signature", "Initial"],
  saveSignatureLimit: 1,
  author: "Syncfusion", // Necessary to treat the handwritten signature as an ink annotation
  saveInitialLimit: 1,
  opacity: 1,
  strokeColor: "#000000",
  width: 150,
  height: 100,
  thickness: 1,
  annotationSelectorSettings: {
    selectionBorderColor: "blue",
    resizerBorderColor: "black",
    resizerFillColor: "#FF4081",
    resizerSize: 8,
    selectionBorderThickness: 1,
    resizerShape: "Circle",
    selectorLineDashArray: [5, 6],
    resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
    resizerCursorType: CursorType.grab,
  },
  allowedInteractions: ["Resize"],
  signatureDialogSettings: {
    displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
    hideSaveSignature: false,
  },
  initialDialogSettings: {
    displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
    hideSaveSignature: false,
  },
};

Configure the PDF Viewer in HTML Template

In your app.component.html, set up the Syncfusion PDF Viewer component and include buttons for exporting and importing annotations:

<button (click)="OnExportJson()">Export Json</button>
<button (click)="OnImportJson()">Import Json</button>
<div class="content-wrapper">
  <ejs-pdfviewer id="pdfViewer"
      [documentPath]='document'
      [resourceUrl]='resource' 
      [isSignatureEditable]="true"
      [handWrittenSignatureSettings]="handWritten"
      (documentLoad)='documentLoad($event)'
      style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

Export Handwritten Signature Annotations

To export handwritten signature annotations, use the OnExportJson() method. This method will invoke exportAnnotationsAsObject() on the PDF viewer instance and store the result in exportObject.

OnExportJson() {
  var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];
  viewer.exportAnnotationsAsObject().then((value: any) => {
    this.exportObject = value;
  });
  console.log(this.exportObject); // For debugging purposes
}

Load Document and Set Annotation Mode

In the documentLoad() method, set the annotation mode to “HandWrittenSignature” after the document is loaded. This ensures the annotations can be applied correctly.

public documentLoad(e: LoadEventArgs): void {
  if (this.isInitialLoading) {
    var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];
    viewer.annotationModule.setAnnotationMode('HandWrittenSignature');
    this.isInitialLoading = false;
  }
}

Import Handwritten Signature Annotations

To import the annotations, implement the OnImportJson() method. This method will take the exported JSON data and use the importAnnotation() method to restore the handwritten signatures in the PDF viewer.

OnImportJson() {
  var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];
  viewer.importAnnotation(JSON.parse(this.exportObject));
}

Key Features Used in the Code:

1. exportAnnotationsAsObject: This function enables the export of annotations, such as handwritten signatures, in the form of a JSON object.
2. importAnnotation: This function is used to bring annotations into the PDF viewer and recover signatures that were saved earlier.

Sample Link:

You can access the complete sample via our GitHub Sample Repository

Conclusion:

I hope you found this article helpful in learning how to export and import handwritten signatures dynamically in Angular PDF Viewer. This method can be used to maintain or share annotations between different sessions or users.

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!