What is a Signature Pad?
A signature pad is a graphical user interface (GUI) element that allows users to provide their signatures on documents. This feature is commonly used in contract management, digital forms, and document signing. Users can create signatures using a mouse, electronic pens, or specialized signing devices. The signature pad also enables saving signatures as images and converting them back to their original format.
Signature Pad Library
To use the Signature Pad library, follow these steps:
- Include the Signature Pad library in your project by adding the following script tag to your HTML file.
- Add a canvas element to your HTML file where the signature will be drawn.
- Add a button element that triggers the signature saving process in your HTML file.
- Attach an event listener to the save button to save the signature as a PDF file when clicked.
- Retrieve the signature as an image file by calling the toDataURL() method on the SignaturePad instance.
- Utilize a PDF generation library, such as jsPDF, to save the signature image as a PDF file.
Feel free to customize the appearance of the canvas element and the save button using CSS. You can also enhance the signature pad’s functionality by adding features like signature clearing, undoing, changing pen color, or saving signatures in different file formats. For more detailed information, refer to the Signature Pad documentation.
- A prebuilt and polished UI.
- 15+ annotation tools.
- Support for multiple file types.
- Dedicated support from our experienced engineers.
To add PSPDFKit to your project, follow these steps:
- Install the pspdfkit package from npm or manually download it.
- Copy the directory containing the required library files (artifacts) to your assets folder.
- Ensure that your assets directory contains the pspdfkit.js file and a pspdfkit-lib directory with the library assets.
To integrate PSPDFKit into your project, follow these steps:
- Add the PDF document you want to display to your project’s directory.
- Insert an empty
<div>element with a defined height where PSPDFKit will be mounted.
- Include pspdfkit.js in your HTML page.
To serve your website and test the signature pad, follow these steps:
- Copy a PDF file into the folder and rename it to document.pdf.
- Install the serve package.
- Serve the contents of the current directory.
- Access your website at http://localhost:8080.
Adding eSignatures via the PSPDFKit UI
In this section, we’ll explore how to sign PDF documents using PSPDFKit’s intuitive user interface (UI). By clicking the sign icon in the demo, a dialog box will appear, enabling you to sign your name. PSPDFKit offers various customization options for your signature, including pen color selection and adding an image or text as your signature. You can also resize and reposition your signature for optimal placement.
PSPDFKit provides two distinct types of programmatically added signatures: ink and image signatures. Let’s explore how to create these signature types and incorporate them into PDF documents.
Adding Ink Signatures Programmatically
Ink signatures resemble traditional pen and paper signatures and can be drawn on a signature pad provided by PSPDFKit.
To add an ink signature programmatically, open the index.html file and modify the PSPDFKit.load() function as follows:
// Code snippet for adding ink signatures programmatically
The PSPDFKit.load() function initializes the PSPDFKit instance, while PSPDFKit.Annotations.InkAnnotation creates freehand drawings for ink signatures. The isSignature property must be set to true. The lines and boundingBox parameters should remain unchanged, and PSPDFKit.Geometry.DrawingPoint inserts the ink signature. The boundingBox determines its position and size.
Adding Image Signatures Programmatically
An image annotation in PSPDFKit allows you to add an image to a PDF document. The image can be fetched from a URL or from a file on the user’s device.
To add an image signature programmatically, open the index.html file and update the PSPDFKit.load() function as shown below:
// Code snippet for adding image signatures programmatically
In the code snippet, we create a PSPDFKit.Annotations.ImageAnnotation by specifying properties like pageIndex, contentType, imageAttachmentId, description, and boundingBox. Here’s what each property represents:
- pageIndex specifies the page number where the image annotation will be added.
- contentType specifies the MIME type of the image file.
- imageAttachmentId specifies the ID of the attachment containing the image data.
- description is an optional property providing a description for the image.
- boundingBox determines the position and size of the image on the PDF document.
Once the image annotation is created, it can be added to the PDF document using the instance.create() method. To see the image, upload an image file named image.png to your project’s root directory.
Creating Signature Fields in PDF Documents
With PSPDFKit, you can effortlessly create signature fields in your PDF documents for adding signatures. Update the PSPDFKit.load() function in the index.html file as follows:
// Code snippet for creating signature fields in PDF documents
In the code snippet, a new signature field is created to allow users to sign within a specific field. PSPDFKit.Annotations.WidgetAnnotation defines properties such as page index, bounding box dimensions, and form field name. PSPDFKit.FormFields.SignatureFormField specifies the name and IDs of the annotations associated with the signature field. Finally, the instance.create() function is used to create the signature field and add it to the PDF document.
Adding a signature pad to your PDF can enhance efficiency and save time when signing electronic documents. Whether you choose the Signature Pad library or PSPDFKit for Web, the process is straightforward to follow. By following the steps outlined in this article, you’ll be able to electronically sign PDF documents in no time.
PSPDFKit offers a comprehensive PDF editing and annotation tool that goes beyond the signature pad. Customize your PDF documents with annotations, text highlights, and even add custom forms using PSPDFKit. For a list of all web frameworks, feel free to contact our sales team or launch our demo to experience our viewer in action.
For more information about PSPDFKit, you can visit our website ProgramMatek.