Fill PDF Form with Web Form Responses
Many PDF forms contain editable fields that allow users to complete the form directly within their PDF viewer and then save, share, or print it. SurveyJS offers a plugin that enables users to fill out form fields using a dynamic SurveyJS UI. Once a user has finished, the plugin automatically transfers the responses to the corresponding fields in the PDF form and saves the document as a PDF file. This help topic explains how to enable and integrate this feature into your application.
Add a Third-Party PDF Library
The form filling functionality requires a third-party PDF library, such as pdf-lib or PDF.js. Depending on whether you have a modular or classic script application, add one of those libraries as shown below.
Option 1: Add the pdf-lib Library
Classic script applications
Reference the pdf-lib script on your HTML page.
<head>
<!-- ... -->
<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
<!-- ... -->
</head>
Modular applications
Install the pdf-lib npm package and import the entire pdf-lib module.
npm install pdf-lib --save
import * as PDFLib from "pdf-lib";
Option 2: Add the PDF.js Library
Classic script applications
Reference the PDF.js script on your HTML page and specify the path or URL to the PDF.js worker script.
<head>
<!-- ... -->
<script src="https://unpkg.com/pdfjs-dist@5.1.91/build/pdf.min.mjs" type="module"></script>
<!-- ... -->
</head>
<body>
<script>
if (!pdfjsLib.GlobalWorkerOptions.workerSrc) {
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://unpkg.com/pdfjs-dist@5.1.91/build/pdf.worker.min.mjs";
}
</script>
</body>
Modular applications
Install the pdfjs-dist npm package, import the entire pdfjs-dist module, and specify the path or URL to the PDF.js worker script.
npm install pdfjs-dist --save
import * as pdfjsLib from "pdfjs-dist";
if (!pdfjsLib.GlobalWorkerOptions.workerSrc) {
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://unpkg.com/pdfjs-dist@5.1.91/build/pdf.worker.min.mjs";
}
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 the PDF libraries:
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. SurveyJS PDF Generator provides adapters forpdf-liband PDF.js out of the box. Pass the libraries to thePDFLibAdapterorPDFJSAdapterconstructor and assign the resulting 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 the demos for a code 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), // For pdf-lib
pdfLibraryAdapter: new PDFJSAdapter(pdfjsLib), // For PDF.js
pdfTemplate: pdfTemplate,
data: data,
fieldMap: fieldMap
});
Save the Filled Out 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");