Automated PDF Form Filling in JavaScript: A Developer's Guide
PDF forms are the backbone of many business processes, from account onboarding to legal agreements. Manually filling these documents is slow and prone to error. Automation is the answer.
In this tutorial, we’ll show you how to create and fill PDF forms programmatically using the Aoexl SDK and JavaScript.
Why Automate PDF Forms?
- Speed: Populate hundreds of documents in seconds.
- Accuracy: Connect directly to your database to eliminate typos.
- Workflow: Integrate document generation into your React, Vue, or Angular applications seamlessly.
1. Setting Up the Aoexl SDK
First, install the viewer package:
npm install @aoexl/viewerThen, initialize the viewer in your JavaScript file:
import { AoexlViewer } from '@aoexl/viewer';
const instance = await AoexlViewer.load({
container: "#viewer",
document: "blank-contract.pdf"
});2. Programmatically Creating Form Fields
The Aoexl SDK allows you to define fields on the fly. Each field consists of a Widget Annotation (the visual rectangle) and a Form Field (the underlying data structure).
Adding a Text Field
const firstNameWidget = new AoexlViewer.Annotations.WidgetAnnotation({
id: AoexlViewer.generateId(),
pageIndex: 0,
formFieldName: "FirstName",
boundingBox: new AoexlViewer.Geometry.Rect({
left: 100, top: 200, width: 200, height: 30
}),
});
const firstNameField = new AoexlViewer.FormFields.TextFormField({
name: "FirstName",
annotationIds: [firstNameWidget.id],
});
await instance.create([firstNameWidget, firstNameField]);3. Prefilling Forms with Data
Once your fields are defined, you can populate them using JSON. This is perfect for pulling data from a REST API.
const formData = {
"FirstName": "John",
"LastName": "Doe",
"AccountType": "Business"
};
await instance.setFormFieldValues(formData);Handling Signatures
Filling a signature field is slightly different—you usually apply an "Ink Annotation" to simulate a signature or use a high-level signing request.
const signatureField = formFields.find(f => f.name === "Signature");
const ink = new AoexlViewer.Annotations.InkAnnotation({
pageIndex: 0,
lines: [/* coordinates for signature */],
boundingBox: signatureField.boundingBox,
isSignature: true
});
await instance.create(ink);Conclusion
By using the Aoexl SDK, you can transform static PDF templates into dynamic, data-driven tools. Whether you need to generate insurance quotes or employment contracts, Aoexl provides the professional-grade API needed for robust document automation.