--- title: Fill In PDF Form Fields Using pdf-lib product: PDF Generator description: Learn how to use SurveyJS PDF Generator and the pdf-lib library to fill interactive fields in existing PDF forms with data collected through SurveyJS online web form. This JavaScript form builder demo shows how to configure the PDFFormFiller plugin, map survey fields to PDF form fields, and save the filled PDF form. framework: Vue 3 source: https://surveyjs.io/pdf-generator/examples/map-survey-responses-to-pdf-fields-using-pdflib/vue3js index: https://surveyjs.io/pdf-generator/examples/overview.md --- # Fill In PDF Form Fields Using pdf-lib (Vue 3) 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-lib` script on your HTML page. ```html ``` - Option 2: Install the `pdf-lib` npm package and import the entire `pdf-lib` module. ```sh npm install pdf-lib ``` ```js import * as PDFLib from "pdf-lib"; ``` ## 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-lib`: - 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-lib`, you need to use the `PDFLibAdapter`, which is part of the `pdf-form-filler` script/module. Instantiate the `PDFLibAdapter` by passing the `PDFLib` 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 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)`](https://surveyjs.io/pdf-generator/documentation/api-reference/pdfformfiller#save) method: ```js form.save("FilledForm.pdf"); ``` ## Files ### `public/index.html` ```html

``` ### `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/App.vue` ```html ``` ### `src/index.css` ```css /* You can add your custom CSS here. */ ``` ### `src/json.ts` ```ts 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?", "showCommentArea": true, "commentText": "If yes, explain", "choices": [ "Yes", "No" ] }, { "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" }; ``` ### `src/main.ts` ```ts import { createApp } from "vue"; import App from "./App.vue"; const app = createApp(App); app.mount("#app"); ``` ### `src/shims-vue.d.ts` ```ts /* eslint-disable */ declare module "*.vue" { import type { DefineComponent } from "vue" const component: DefineComponent<{}, {}, any> export default component } ``` ### `.eslintrc.js` ```js module.exports = { root: true, env: { node: true }, extends: [ "plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier", "@vue/prettier/@typescript-eslint" ], parserOptions: { ecmaVersion: 2020 }, rules: { "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off" }, overrides: [ { files: [ "**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)" ], env: { jest: true } } ] }; ``` ### `babel.config.js` ```js module.exports = { presets: ["@vue/cli-plugin-babel/preset"] }; ``` ### `package.json` ```json { "name": "surveyjs-library-vue3", "version": "0.1.0", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "tslib": "2.6.1", "vue": "^3.4.1", "pdf-lib": "1.17.1", "survey-core": "latest", "survey-pdf": "latest", "survey-vue3-ui": "latest", "vue-router": "^4.0.0-0", "vuex": "^4.0.0-0" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^2.33.0", "@typescript-eslint/parser": "^2.33.0", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-pwa": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-typescript": "^5.0.2", "@vue/test-utils": "^2.0.0-0", "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.1.3", "eslint-plugin-vue": "^7.0.0-0", "node-sass": "^4.12.0", "prettier": "^1.19.1", "sass-loader": "^8.0.2", "typescript": "~3.9.3" } } ``` ### `tsconfig.json` ```json { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "types": [ "webpack-env", "jest" ], "paths": { "@/*": [ "src/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ] }, "include": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx" ], "exclude": [ "node_modules" ] } ``` ## Other Frameworks - [Angular](https://surveyjs.io/pdf-generator/examples/map-survey-responses-to-pdf-fields-using-pdflib/angular.md) - [React](https://surveyjs.io/pdf-generator/examples/map-survey-responses-to-pdf-fields-using-pdflib/reactjs.md) - [jQuery](https://surveyjs.io/pdf-generator/examples/map-survey-responses-to-pdf-fields-using-pdflib/jquery.md) - [Vanilla JS](https://surveyjs.io/pdf-generator/examples/map-survey-responses-to-pdf-fields-using-pdflib/vanillajs.md)