---
title: Fill In PDF Form Fields Using PDF.js
product: PDF Generator
description: Learn how to use SurveyJS PDF Generator and the PDF.js library to fill out your editable PDF form with data collected through SurveyJS online web form. This JavaScript form builder demo shows how to map survey responses to PDF fields and save the filled-in form as a PDF file.
framework: Vanilla JS
source: https://surveyjs.io/pdf-generator/examples/fill-in-pdf-form-fields-with-dynamic-survey-data-using-pdfjs/vanillajs
index: https://surveyjs.io/pdf-generator/examples/overview.md
---
# Fill In PDF Form Fields Using PDF.js (Vanilla 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.
```html
```
- Option 2: Install the `pdfjs-dist` npm package, import the entire `pdfjs-dist` module, and specify the path or URL to the PDF.js worker script.
```sh
npm install pdfjs-dist
```
```js
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`](https://surveyjs.io/pdf-generator/documentation/api-reference/pdfformfiller) plugin. To add it to your application, use the same options as with PDF.js:
- Option 1: Reference the `pdf-form-filler` script on your HTML page.
```html
```
- Option 2: Install the `survey-pdf` npm package and import `PDFFormFiller` from the `survey-pdf/pdf-form-filler` module.
```sh
npm install survey-pdf
```
```js
import { PDFFormFiller } from "survey-pdf/pdf-form-filler";
```
To configure the `PDFFormFiller` plugin, pass a configuration object with the following properties to its constructor:
- [`pdfLibraryAdapter`](https://surveyjs.io/pdf-generator/documentation/api-reference/pdfformfiller#pdfLibraryAdapter)
An adapter serves as a bridge between the plugin and a specific third-party library. For PDF.js, you need to use the `PDFJSAdapter`, which is part of the `pdf-form-filler` script/module. Instantiate the `PDFJSAdapter` by passing the `pdfjsLib` object to its constructor and assign the instance to the `pdfLibraryAdapter` property.
- [`pdfTemplate`](https://surveyjs.io/pdf-generator/documentation/api-reference/pdfformfiller#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`](https://surveyjs.io/pdf-generator/documentation/api-reference/pdfformfiller#data)
An object with data used to populate the PDF document. Use the [`SurveyModel`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model)'s [`data`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#data) property to access this data object.
- [`fieldMap`](https://surveyjs.io/pdf-generator/documentation/api-reference/pdfformfiller#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 the `SurveyModel`'s `data` property 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](https://surveyjs.io/form-library/examples/create-checkboxes-question-in-javascript/), [Dynamic Matrix](https://surveyjs.io/form-library/examples/dynamic-matrix-add-new-rows/), and [Dynamic Panel](https://surveyjs.io/form-library/examples/duplicate-group-of-fields-in-form/) require a different configuration. Refer to the `fieldMap` object in code for an example.
The following code shows a simple example of `PDFFormFiller` configuration:
```js
// ...
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)`](https://surveyjs.io/pdf-generator/documentation/api-reference/pdfformfiller#save) method:
```js
form.save("FilledForm.pdf");
```
## Files
### `public/index.html`
```html
```
### `src/index.css`
```css
/* You can add your custom CSS here. */
```
### `src/pdf-data.js`
```js
export const fieldMap = {
"employer": "Employer",
"position": "Position",
"name": "Candidate Name",
"address": "Street address",
"city": "City",
"state": "State",
"zip": "Zip",
"home_phone": "Home phone number",
"business_phone": "Business phone number",
"cell_phone": "Cell phone number",
"start_date": "Start date",
"salary_desired": "Salary desired",
"high_school_diploma": "Diploma or GED",
// Checkboxes
"work_hours": {
"Full Time": {
field: "Full time",
value: true
},
"Part Time": {
field: "Part time",
value: true
},
"Days": {
field: "Days",
value: true
},
"Evenings": {
field: "Evenings",
value: true
},
"Swing": {
field: "Swing",
value: true
},
"Graveyard": {
field: "Graveyard",
value: true
},
"Weekends": {
field: "Weekends",
value: true
}
},
"employment_status": "Status",
"authorized_to_work": "Authorized to work",
"convicted_felony": "Convicted of a felony",
"felony_explanation": "Felony conviction",
"informed_of_functions": "Viewed job description",
"perform_functions": "Perform the job without accomodation",
// Dynamic Matrix
"qualifications": [
{
"school_name": "School name 1",
"degree": "Degree 1",
"school_address": "School 1 address"
},
{
"school_name": "School name 2",
"degree": "Degree 2",
"school_address": "School 2 address"
},
{
"school_name": "School name 3",
"degree": "Degree 3",
"school_address": "School 3 address"
}
],
"skills": "Special skills",
// Dynamic Matrix
"references": [
{
"ref_name": "Referent 1 name",
"ref_address": "Referent 1 relationship",
"ref_phone": "Referent 1 address",
"ref_relationship": "Referent 1 phone"
},
{
"ref_name": "Referent 2 name",
"ref_address": "Referent 2 relationship",
"ref_phone": "Referent 2 address",
"ref_relationship": "Referent 2 phone"
},
{
"ref_name": "Referent 3 name",
"ref_address": "Referent 3 relationship",
"ref_phone": "Referent 3 address",
"ref_relationship": "Referent 3 phone"
}
],
// Dynamic Panel
"work_history": [
{
"job_title": "Job 1 title",
"company_name": "Job 1 company name",
"work_start_date": "Job 1 start date",
"work_end_date": "Job 1 end date",
"work_duties": "Job 1 duties",
"supervisors_name": "Job 1 supervisor's name",
"work_phone": "Job 1 phone",
"work_city": "Job 1 city"
},
{
"job_title": "Job 2 title",
"company_name": "Job 2 company name",
"work_start_date": "Job 2 start date",
"work_end_date": "Job 2 end date",
"work_duties": "Job 2 duties",
"supervisors_name": "Job 2 supervisor's name",
"work_phone": "Job 2 phone",
"work_city": "Job 2 city"
},
{
"job_title": "Job 3 title",
"company_name": "Job 3 company name",
"work_start_date": "Job 3 start date",
"work_end_date": "Job 3 end date",
"work_duties": "Job 3 duties",
"supervisors_name": "Job 3 supervisor's name",
"work_phone": "Job 3 phone",
"work_city": "Job 3 city"
}
],
"work_contact_present_employer": "May we contact present employer",
"date": "Date"
}
export const defaultData = {
"employer": "ABC Technologies",
"position": "Software Engineer",
"name": "Doe, Jane Marie",
"address": "1234 Elm Street",
"city": "Springfield",
"state": "IL",
"zip": "62704",
"home_phone": "(217) 555-1234",
"business_phone": "(217) 555-5678",
"cell_phone": "(217) 555-9012",
"start_date": "2025-06-01",
"salary_desired": "$70,000/year",
"high_school_diploma": "Yes",
"work_hours": [
"Full Time",
"Days",
"Evenings",
"Weekends"
],
"employment_status": "Regular",
"authorized_to_work": "Yes",
"convicted_felony": "No",
"informed_of_functions": "Yes",
"perform_functions": "Yes",
"qualifications": [
{
"school_name": "Springfield High School",
"degree": "High School Diploma",
"school_address": "Springfield, IL"
},
{
"school_name": "University of Illinois",
"degree": "B.S. in Computer Science",
"school_address": "Urbana-Champaign, IL"
},
{
"school_name": "Codecademy Full Stack Bootcamp",
"degree": "Certificate",
"school_address": "Online"
}
],
"skills": "- Proficient in JavaScript, React, Python\n- Team leadership in university projects\n- Volunteer web development for non-profit organizations\n- Fluent in Spanish",
"references": [
{
"ref_name": "John Smith",
"ref_address": "101 Main St, Springfield, IL",
"ref_phone": "(217) 555-3456",
"ref_relationship": "Former Supervisor"
},
{
"ref_name": "Sarah Johnson",
"ref_address": "202 Oak Ave, Springfield, IL",
"ref_phone": "(217) 555-7890",
"ref_relationship": "College Professor"
},
{
"ref_name": "Michael Lee",
"ref_address": "303 Pine Rd, Springfield, IL",
"ref_phone": "(217) 555-6789",
"ref_relationship": "Project Team Lead"
}
],
"work_history": [
{
"job_title": "Junior Developer",
"work_start_date": "2023-06-01",
"company_name": "WebWorks Inc.",
"supervisors_name": "Emily Rogers",
"work_phone": "(217) 555-2468",
"work_city": "Springfield, IL",
"work_duties": "Frontend development, client site maintenance"
},
{
"job_title": "IT Intern",
"work_start_date": "2022-01-10",
"work_end_date": "2023-05-30",
"company_name": "City IT Department",
"supervisors_name": "Marcus Allen",
"work_phone": "(217) 555-3344",
"work_city": "Springfield, IL",
"work_duties": "Tech support, website updates"
}
],
"work_contact_present_employer": "Yes",
"date": "2025-05-21"
}
```
### `src/index.js`
```js
import pdfjsLib from "pdfjs-dist";
import { PDFFormFiller, PDFJSAdapter } from "survey-pdf/pdf-form-filler";
import { Model } from "survey-core";
import "survey-js-ui";
import { defaultData, fieldMap } from "./pdf-data";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";
const pdfTemplatePath = "https://surveyjs.io/static/job-application-demo.pdf";
const previewDiv = document.getElementById("pdf-preview");
const previewEmbed = document.getElementById("pdf-preview-frame");
let form;
let formBlobUrl;
async function loadPdf() {
if (!pdfjsLib.GlobalWorkerOptions.workerSrc) {
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://unpkg.com/pdfjs-dist@5.1.91/build/pdf.worker.min.mjs";
}
const pdf = await fetch(pdfTemplatePath);
form = new PDFFormFiller({
fieldMap: fieldMap,
pdfTemplate: pdf,
pdfLibraryAdapter: new PDFJSAdapter(pdfjsLib)
});
}
async function preparePdf(data) {
if (!form) {
await loadPdf();
}
form.data = data;
}
async function savePdf(name, data) {
await preparePdf(data);
form.save(name);
}
async function previewPdf(data) {
if (previewDiv.style.display !== "none") {
previewDiv.style.display = "none";
return;
}
await preparePdf(data);
form.raw("blob").then((blob) => {
if (formBlobUrl) {
URL.revokeObjectURL(formBlobUrl);
}
formBlobUrl = URL.createObjectURL(blob);
previewEmbed.setAttribute("src", formBlobUrl);
previewDiv.style.display = "block";
previewDiv.appendChild(previewEmbed);
});
}
const survey = new Model(json);
survey.data = defaultData;
survey.showCompleteButton = false;
survey.navigationButtonsLocation = "topBottom";
survey.addNavigationItem({
id: "sv-nav-save-pdf",
title: "Download PDF",
action: () => {
savePdf("FilledForm.pdf", survey.data);
}
});
survey.addNavigationItem({
id: "survey_pdf_preview",
title: "Preview PDF",
action: () => {
previewPdf(survey.data);
}
});
survey.render(document.getElementById("surveyElement"));
```
### `src/json.js`
```js
export const json = {
"title": "Standard Application for Employment",
"description": "Please carefully read and answer all questions. You will not be considered for employment if you fail to completely answer all the questions on this application.",
"pages": [
{
"name": "page1",
"elements": [
{
"type": "text",
"name": "employer",
"title": "Employer"
},
{
"type": "dropdown",
"name": "position",
"startWithNewLine": false,
"title": "Position applying for",
"choices": [
"Software Engineer",
"Frontend Developer",
"Backend Developer",
"UI/UX Designer",
"Project Manager"
]
},
{
"type": "panel",
"name": "personal_data",
"title": "Personal Data",
"elements": [
{
"type": "text",
"name": "name",
"title": "Name (last, first, middle)"
},
{
"type": "text",
"name": "address",
"title": "Street Address and/or Mailing Address"
},
{
"type": "text",
"name": "city",
"title": "City"
},
{
"type": "text",
"name": "state",
"startWithNewLine": false,
"title": "State"
},
{
"type": "text",
"name": "zip",
"startWithNewLine": false,
"title": "Zip"
},
{
"type": "text",
"name": "home_phone",
"title": "Home Telephone Number"
},
{
"type": "text",
"name": "business_phone",
"startWithNewLine": false,
"title": "Business Telephone Number"
},
{
"type": "text",
"name": "cell_phone",
"startWithNewLine": false,
"title": "Cellular Telephone Number"
},
{
"type": "text",
"name": "start_date",
"title": "Date you can start work",
"inputType": "date",
"minValueExpression": "today()"
},
{
"type": "text",
"name": "salary_desired",
"startWithNewLine": false,
"title": "Salary Desired"
},
{
"type": "boolean",
"name": "high_school_diploma",
"title": "Do you have a High School Diploma or GED?",
"valueTrue": "Yes",
"valueFalse": "No"
}
]
},
{
"type": "panel",
"name": "position_information",
"title": "Position Information",
"description": "Check all that you are willing to work.",
"elements": [
{
"type": "checkbox",
"name": "work_hours",
"title": "Hours",
"choices": [
"Full Time",
"Part Time",
"Days",
"Evenings",
"Swing",
"Graveyard",
"Weekends"
],
"colCount": 2
},
{
"type": "radiogroup",
"name": "employment_status",
"title": "Status",
"choices": [
"Regular",
"Temporary"
]
},
{
"type": "radiogroup",
"name": "authorized_to_work",
"title": "Are you authorized to work in the U.S. on an unrestricted basis?",
"choices": [
"Yes",
"No"
]
},
{
"type": "radiogroup",
"name": "convicted_felony",
"title": "Have you ever been convicted of a felony?",
"choices": [
"Yes",
"No"
]
},
{
"type": "comment",
"name": "felony_explanation",
"visibleIf": "{convicted_felony} = 'Yes'",
"startWithNewLine": false,
"title": "If yes, explain:"
},
{
"type": "radiogroup",
"name": "informed_of_functions",
"title": "Have you been told the essential functions of the job or have you been viewed a copy of the job description listing the essential functions of the job?",
"choices": [
"Yes",
"No"
]
},
{
"type": "radiogroup",
"name": "perform_functions",
"title": "Can you perform these essential functions of the job with or without reasonable accommodation?",
"choices": [
"Yes",
"No"
]
}
]
},
{
"type": "matrixdynamic",
"name": "qualifications",
"title": "Qualifications",
"description": "Please list any education or training you feel relates to the position applied for that would help you perform the work, such as schools, colleges, degrees, vocational or technical programs, and military training.",
"columns": [
{
"name": "school_name",
"title": "School Name",
"cellType": "text"
},
{
"name": "degree",
"title": "Degree",
"cellType": "text"
},
{
"name": "school_address",
"title": "Address/City/State",
"cellType": "text"
}
],
"allowAddRows": false,
"allowRemoveRows": false,
"rowCount": 3
},
{
"type": "comment",
"name": "skills",
"title": "Special skills",
"description": "List any special skills or experience that you feel would help you in the position that you are applying for (leadership, organizations/teams, etc.)"
},
{
"type": "matrixdynamic",
"name": "references",
"title": "References",
"description": "Please list three professional references not related to you, with full name, address, phone number, and relationship. If you don’t have three professional references, then list personal, unrelated references.",
"columns": [
{
"name": "ref_name",
"title": "Name",
"cellType": "text"
},
{
"name": "ref_address",
"title": "Address/City/State",
"cellType": "text"
},
{
"name": "ref_phone",
"title": "Phone",
"cellType": "text"
},
{
"name": "ref_relationship",
"title": "Relationship",
"cellType": "text"
}
],
"allowAddRows": false,
"allowRemoveRows": false,
"rowCount": 3
},
{
"type": "paneldynamic",
"name": "work_history",
"title": "Work history",
"description": "Start with your present or most recent employment and work back. (INCLUDE PAID AND UNPAID POSITIONS)",
"templateElements": [
{
"type": "text",
"name": "job_title",
"title": "Job Title"
},
{
"type": "text",
"name": "work_start_date",
"title": "Start Date",
"inputType": "date"
},
{
"type": "text",
"name": "work_end_date",
"startWithNewLine": false,
"title": "End Date",
"inputType": "date"
},
{
"type": "text",
"name": "company_name",
"title": "Company Name"
},
{
"type": "text",
"name": "supervisors_name",
"startWithNewLine": false,
"title": "Supervisor's Name "
},
{
"type": "text",
"name": "work_phone",
"title": "Phone Number",
"inputType": "tel"
},
{
"type": "text",
"name": "work_city",
"title": "City, State"
},
{
"type": "comment",
"name": "work_duties",
"title": "Duties: "
}
],
"panelCount": 1,
"maxPanelCount": 4,
"confirmDelete": true
},
{
"type": "boolean",
"name": "work_contact_present_employer",
"title": "May we contact your present employer?",
"valueTrue": "Yes",
"valueFalse": "No"
},
{
"type": "text",
"name": "date",
"title": "Date",
"defaultValueExpression": "today()",
"inputType": "date",
"maxValueExpression": "today()"
}
]
}
],
"headerView": "advanced"
};
```
### `package.json`
```json
{
"dependencies": {
"survey-core": "latest",
"survey-js-ui": "latest",
"pdfjs-dist": "latest",
"pdf-form-filler": "latest"
}
}
```
## Other Frameworks
- [Angular](https://surveyjs.io/pdf-generator/examples/fill-in-pdf-form-fields-with-dynamic-survey-data-using-pdfjs/angular.md)
- [React](https://surveyjs.io/pdf-generator/examples/fill-in-pdf-form-fields-with-dynamic-survey-data-using-pdfjs/reactjs.md)
- [Vue 3](https://surveyjs.io/pdf-generator/examples/fill-in-pdf-form-fields-with-dynamic-survey-data-using-pdfjs/vue3js.md)
- [jQuery](https://surveyjs.io/pdf-generator/examples/fill-in-pdf-form-fields-with-dynamic-survey-data-using-pdfjs/jquery.md)