Fill In PDF Form Fields Using pdf-lib
With SurveyJS PDF Generator, you can fill interactive fields in existing PDF forms—such as job applications, registration forms, or any standardized forms—with survey data. This helps automate data entry and streamline document workflows. To enable this functionality, you'll need a PDF document with empty fields, a data object produced by a SurveyJS survey, and an object that maps survey fields to PDF form fields. You'll also need a third-party library, such as pdf-lib.
Add the pdf-lib Library
Depending on whether you have a modular or classic script application, add the pdf-lib library to it as follows:
Option 1: Reference the
pdf-libscript on your HTML page.<head> <!-- ... --> <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script> <!-- ... --> </head>Option 2: Install the
pdf-libnpm package and import the entirepdf-libmodule.npm install pdf-lib --saveimport * as PDFLib from "pdf-lib";
Configure the PDFFormFiller Plugin
SurveyJS PDF Generator integrates with a third-party library using the PDFFormFiller plugin. To add it to your application, use the same options as with pdf-lib:
Option 1: Reference the
pdf-form-fillerscript on your HTML page.<head> <!-- ... --> <script src="https://unpkg.com/survey-pdf/pdf-form-filler.min.js"></script> <!-- ... --> </head>Option 2: Install the
survey-pdfnpm package and importPDFFormFillerfrom thesurvey-pdf/pdf-form-fillermodule.npm install survey-pdf --saveimport { PDFFormFiller } from "survey-pdf/pdf-form-filler";
To configure the PDFFormFiller plugin, pass a configuration object with the following properties to its constructor:
pdfLibraryAdapter
An adapter serves as a bridge between the plugin and a specific third-party library. Forpdf-lib, you need to use thePDFLibAdapter, which is part of thepdf-form-fillerscript/module. Instantiate thePDFLibAdapterby passing thePDFLibobject to its constructor and assign the instance to thepdfLibraryAdapterproperty.pdfTemplate
A PDF document with interactive fields that you want to fill. You can load it from a server or encode the document to a Base64 data URL and embed it in your code.data
An object with data used to populate the PDF document. Use theSurveyModel'sdataproperty to access this data object.fieldMap
An object that maps survey fields to PDF form fields. Object keys are survey field names and object values are PDF form field IDs. The easiest way to build a field map is to access the data object with respondent answers using theSurveyModel'sdataproperty and replace the values with the PDF form field IDs. To find the IDs, open your PDF document in any editor that allows viewing them. Note that certain field types, such as Checkboxes, Dynamic Matrix, and Dynamic Panel require a different configuration. Refer to thefieldMapobject in code for an example.
The following code shows a simple example of PDFFormFiller configuration:
// ...
const pdfTemplate = "data:application/pdf;base64,...";
const data = {
"employer": "ABC Technologies",
"position": "Software Developer",
"name": "Doe, Jane Marie",
// ...
}
const fieldMap = {
"employer": "Employer",
"position": "Position",
"name": "Candidate Name",
// ...
}
const form = new PDFFormFiller({
pdfLibraryAdapter: new PDFLibAdapter(PDFLib),
pdfTemplate: pdfTemplate,
data: data,
fieldMap: fieldMap
});
Save the Filled In PDF Form
To save the PDF document with populated interactive fields on a user's storage, call the PDFFormFiller's save(name) method:
form.save("FilledForm.pdf");