--- title: Income Survey product: PDF Generator description: Download a printable income survey in PDF. Generate editable or prefilled income research questionnaires using SurveyJS PDF Generator. framework: Vanilla JS source: https://surveyjs.io/pdf-generator/examples/template-how-to-configure-and-embed-income-survey/vanillajs index: https://surveyjs.io/pdf-generator/examples/overview.md --- # Income Survey (Vanilla JS) ## Files ### `public/index.html` ```html
``` ### `src/index.css` ```css /* You can add your custom CSS here. */ ``` ### `src/index.js` ```js import { Model } from "survey-core"; import "survey-js-ui"; import { SurveyPDF } from "survey-pdf"; import "survey-core/survey-core.min.css"; import "./index.css"; import { json } from "./json"; function createSurveyPdfModel (surveyModel) { const surveyPDF = new SurveyPDF(json); if (surveyModel) { surveyPDF.data = surveyModel.data; surveyPDF.locale = surveyModel.locale; } return surveyPDF; } function saveSurveyToPdf (filename, surveyModel) { const pdfDoc = createSurveyPdfModel(surveyModel); if (!pdfDoc) return; pdfDoc.save(filename); } const previewDiv = document.getElementById("pdf-preview"); const previewEmbed = document.getElementById("pdf-preview-frame"); let pdfBlobUrl; function showPdfPreview(surveyModel) { if (!previewDiv || !previewEmbed) return; const pdfDoc = createSurveyPdfModel(surveyModel); if (!pdfDoc) return; pdfDoc.raw("blob").then((blob) => { if (pdfBlobUrl) { URL.revokeObjectURL(pdfBlobUrl); } pdfBlobUrl = URL.createObjectURL(blob); previewEmbed.setAttribute("src", pdfBlobUrl); previewDiv.style.display = "block"; }); } function previewPdf(surveyModel) { if (!previewDiv) return; if (previewDiv.style.display !== "none") { previewDiv.style.display = "none"; return; } showPdfPreview(surveyModel); } const survey = new Model(json); survey.showCompleteButton = false; survey.navigationButtonsLocation = "topBottom"; survey.addNavigationItem({ id: "survey_save_as_file", title: "Download PDF", action: () => { saveSurveyToPdf("surveyResult.pdf", survey); } }); survey.addNavigationItem({ id: "survey_pdf_preview", title: "Preview PDF", visible: window.navigator.pdfViewerEnabled, action: () => { previewPdf(survey); } }); survey.render(document.getElementById("surveyElement")); ``` ### `src/json.js` ```js export const json = { "title": "Income", "description": "", "pages": [ { "name": "page0", "elements": [ { "type": "panel", "elements": [ { "type": "html", "name": "intro", "html": "

In this section, provide information about your current employment and any other way you and your partner receive income.

It may be helpful to have the following documents available:

- A recent payslip (for employment details)

- A current Centrelink schedule for any account-based pension from super, annuities, or other income stream products you own

- The latest statements for any payments from Centrelink or another authority

" } ] } ] }, { "name": "page1", "elements": [ { "type": "radiogroup", "name": "maritalstatus_c", "title": "What is your marital status?", "choices": [ "Married", "In a registered relationship", "Living with my partner", "Widowed", "Single" ], "colCount": 2 } ] }, { "name": "page2", "title": "Income from employment", "elements": [ { "type": "panel", "name": "panel2", "title": "You", "description": "Indicate whether you currently receive income from employment. Include all sources of earnings from your job or jobs, if applicable.", "elements": [ { "type": "radiogroup", "name": "member_receives_income_from_employment", "title": "Do you currently receive income from employment?", "isRequired": true, "choices": [ { "value": "1", "text": "Yes" }, { "value": "0", "text": "No" } ], "colCount": 2 }, { "type": "checkbox", "name": "member_type_of_employment", "title": "Type of employment (if you receive income from employment)", "choices": [ "Self employment", "All other types of employment" ], "colCount": 2 } ] }, { "type": "panel", "name": "panel3", "title": "Your Partner", "startWithNewLine": false, "description": "Indicate whether your partner currently receives income from employment. Include all sources of earnings from their job or jobs, if applicable.", "elements": [ { "type": "radiogroup", "name": "partner_receives_income_from_employment", "title": "Does your partner currently receive income from employment?", "isRequired": true, "choices": [ { "value": "1", "text": "Yes" }, { "value": "0", "text": "No" } ], "colCount": 2 }, { "type": "checkbox", "name": "partner_type_of_employment", "title": "Partner's employment type (if your partner receives income)", "choices": [ "Self employment", "All other types of employment" ], "colCount": 2 } ] } ] }, { "name": "page3_2", "title": "Employers", "description": "List your employers and your partner's employers if applicable. Provide details about each employer. Complete the sections that apply.", "elements": [ { "type": "paneldynamic", "name": "member_arrray_employer_info", "title": "Your employers", "valueName": "member_arrray_employer", "templateTitle": "Employer {panelIndex}", "panelCount": 3, "panelsState": "firstExpanded", "addPanelText": "Add employer", "templateElements": [ { "type": "text", "name": "member_employer_name", "title": "Employer name", "valueName": "name" }, { "type": "text", "name": "member_employer_address", "title": "Employer address", "valueName": "address" }, { "type": "text", "name": "member_employer_phone", "title": "Phone number", "valueName": "phone", "startWithNewLine": false }, { "type": "text", "name": "member_employer_abn", "title": "ABN", "valueName": "abn", "startWithNewLine": false }, { "type": "radiogroup", "name": "member_employer_role", "title": "Employment type", "valueName": "role", "choices": [ "Full time", "Part time", "Casual", "Seasonal" ], "colCount": 2 }, { "type": "text", "name": "member_employer_hours_worked", "title": "Hours worked", "valueName": "hours_worked", "inputType": "number" }, { "type": "radiogroup", "name": "member_employer_hours_worked_frequency", "title": "Hours frequency", "valueName": "hours_worked_frequency", "choices": [ "Day", "Week", "Fortnight", "Month", "Year" ], "startWithNewLine": false, "colCount": 2 }, { "type": "text", "name": "member_employer_income", "title": "Income amount", "valueName": "income", "inputType": "number" }, { "type": "radiogroup", "name": "member_employer_income_frequency", "title": "Income frequency", "valueName": "income_frequency", "choices": [ "Day", "Week", "Fortnight", "Month", "Year" ], "startWithNewLine": false, "colCount": 2 } ] }, { "type": "paneldynamic", "name": "partner_arrray_employer_info", "title": "Your partner's employers", "valueName": "partner_arrray_employer", "templateTitle": "Employer {panelIndex}", "panelCount": 3, "panelsState": "firstExpanded", "startWithNewLine": false, "addPanelText": "Add employer", "templateElements": [ { "type": "text", "name": "partner_employer_name", "title": "Employer name", "valueName": "name" }, { "type": "text", "name": "partner_employer_address", "title": "Employer address", "valueName": "address" }, { "type": "text", "name": "partner_employer_phone", "title": "Phone number", "valueName": "phone", "startWithNewLine": false }, { "type": "text", "name": "partner_employer_abn", "title": "ABN", "valueName": "abn", "startWithNewLine": false }, { "type": "radiogroup", "name": "partner_employer_role", "title": "Employment type", "valueName": "role", "choices": [ "Full time", "Part time", "Casual", "Seasonal" ], "colCount": 2 }, { "type": "text", "name": "partner_employer_hours_worked", "title": "Hours worked", "valueName": "hours_worked", "inputType": "number" }, { "type": "radiogroup", "name": "partner_employer_hours_worked_frequency", "title": "Hours frequency", "valueName": "hours_worked_frequency", "choices": [ "Day", "Week", "Fortnight", "Month", "Year" ], "startWithNewLine": false, "colCount": 2 }, { "type": "text", "name": "partner_employer_income", "title": "Income amount", "valueName": "income", "inputType": "number" }, { "type": "radiogroup", "name": "partner_employer_income_frequency", "title": "Income frequency", "valueName": "income_frequency", "choices": [ "Day", "Week", "Fortnight", "Month", "Year" ], "startWithNewLine": false, "colCount": 2 } ] } ] }, { "name": "page4", "title": "Fringe benefits", "description": "Indicate whether any employers provide fringe benefits such as a company car, housing allowance, or other non-cash benefits. Complete the details if applicable.", "elements": [ { "type": "panel", "name": "panel7", "title": "You", "elements": [ { "type": "radiogroup", "name": "member_receive_fringe_benefits", "title": "Do any of your employers provide fringe benefits?", "isRequired": true, "choices": [ { "value": "1", "text": "Yes" }, { "value": "0", "text": "No" } ], "colCount": 2 }, { "type": "text", "name": "member_fringe_benefits_type", "title": "Type of fringe benefit (if yes)" }, { "type": "text", "name": "member_fringe_benefits_value", "title": "Annual taxable value (if applicable)" }, { "type": "radiogroup", "name": "member_fringe_benefits_grossing", "title": "Is this amount grossed up?", "choices": [ "Grossed up", "Not grossed up" ], "colCount": 2 } ] }, { "type": "panel", "name": "panel13", "title": "Your Partner", "startWithNewLine": false, "elements": [ { "type": "radiogroup", "name": "partner_receive_fringe_benefits", "title": "Do any of your partner's employers provide fringe benefits?", "isRequired": true, "choices": [ { "value": "1", "text": "Yes" }, { "value": "0", "text": "No" } ], "colCount": 2 }, { "type": "text", "name": "partner_fringe_benefits_type", "title": "Type of fringe benefit (if yes)" }, { "type": "text", "name": "partner_fringe_benefits_value", "title": "Annual taxable value (if applicable)" }, { "type": "radiogroup", "name": "partner_fringe_benefits_grossing", "title": "Is this amount grossed up?", "choices": [ "Grossed up", "Not grossed up" ], "colCount": 2 } ] } ] }, { "name": "page5", "title": "Seasonal or contract work", "description": "In the last 6 months, indicate whether you or your partner performed seasonal, intermittent, or contract work.", "elements": [ { "type": "panel", "name": "panel14", "title": "You", "elements": [ { "type": "radiogroup", "name": "member_seasonal_intermittent_or_contract_work", "title": "Have you done seasonal, intermittent, or contract work in the last 6 months?", "isRequired": true, "choices": [ { "value": "1", "text": "Yes" }, { "value": "0", "text": "No" } ], "colCount": 2 } ] }, { "type": "panel", "name": "panel15", "title": "Your Partner", "startWithNewLine": false, "elements": [ { "type": "radiogroup", "name": "partner_seasonal_intermittent_or_contract_work", "title": "Has your partner done seasonal, intermittent, or contract work in the last 6 months?", "isRequired": true, "choices": [ { "value": "1", "text": "Yes" }, { "value": "0", "text": "No" } ], "colCount": 2 } ] } ] } ], "storeOthersAsComment": false, "questionsOnPageMode": "singlePage", "headerView": "advanced" }; ``` ### `src/theme.js` ```js export const themeJson = {}; ``` ### `package.json` ```json { "dependencies": { "survey-core": "latest", "survey-js-ui": "latest", "survey-pdf": "latest" } } ``` ## Other Frameworks - [Angular](https://surveyjs.io/pdf-generator/examples/template-how-to-configure-and-embed-income-survey/angular.md) - [React](https://surveyjs.io/pdf-generator/examples/template-how-to-configure-and-embed-income-survey/reactjs.md) - [Vue 3](https://surveyjs.io/pdf-generator/examples/template-how-to-configure-and-embed-income-survey/vue3js.md) - [jQuery](https://surveyjs.io/pdf-generator/examples/template-how-to-configure-and-embed-income-survey/jquery.md)