Fill In PDF Form Fields Using PDF.js
SurveyJS PDF Generator allows you to populate editable PDF form fields with data collected through a digital SurveyJS form. This feature enables users to fill standardized forms—such as job applications or contact forms—using a dynamic SurveyJS UI. To enable this functionality, you'll need a third-party library. This example demonstrates how to use PDF.js.
Add the PDF.js Library
Depending on whether you have a modular or classic script application, add the PDF.js library to it as follows:
Option 1: 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>Option 2: Install the
pdfjs-distnpm package, import the entirepdfjs-distmodule, and specify the path or URL to the PDF.js worker script.npm install pdfjs-dist --saveimport * 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 PDF.js:
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. For PDF.js, you need to use thePDFJSAdapter, which is part of thepdf-form-fillerscript/module. Instantiate thePDFJSAdapterby passing thepdfjsLibobject 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 PDFJSAdapter(pdfjsLib),
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");