--- title: Create a Read-Only PDF Form product: PDF Generator description: This demo illustrates how to pre-fill a SurveyJS form with data and then generate a read-only PDF document using the PDF Generator. The JavaScript demo focuses on creating non-editable PDF forms for viewing purposes, rather than interactive forms for user input that are generated by default. framework: jQuery source: https://surveyjs.io/pdf-generator/examples/how-to-create-read-only-pdf-form/jquery index: https://surveyjs.io/pdf-generator/examples/overview.md --- # Create a Read-Only PDF Form (jQuery) By default, PDF Generator renders SurveyJS forms as PDF files with interactive elements, allowing users to enter text in text boxes, select items from drop-down lists and radio button groups, and otherwise modify the generated forms. If your PDF form is intended only for viewing, you can enable read-only mode. This demo shows how to pre-fill a form with data and save it as a read-only PDF document. To generate any PDF document using SurveyJS PDF Generator, you need to create a [`SurveyPDF`](/pdf-generator/documentation/api-reference/surveypdf) instance by passing a survey JSON schema and document configuration options as parameters to the `SurveyPDF` constructor: ```js const surveyPdf = new SurveyPDF.SurveyPDF(surveyJson, pdfDocOptions); // In modular applications: import { SurveyPDF } from "survey-pdf"; const surveyPdf = new SurveyPDF(surveyJson, pdfDocOptions); ``` To pre-fill a PDF document with data, assign a JSON object with survey results to `SurveyPDF`'s `data` property. Enable the read-only mode by setting the `readOnly` property to `true` and call the [`save(fileName)`](/pdf-generator/documentation/api-reference/surveypdf#save) method to save the generated form on the user's computer: ```js surveyPdf.data = surveyResults; surveyPdf.readOnly = true; ``` ## Files ### `public/index.html` ```html
``` ### `src/index.css` ```css /* You can add your custom CSS here. */ ``` ### `src/index.js` ```js import $ from "jquery"; 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; } surveyPDF.readOnly = true; 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.data = { "qualities": { "affordable": "3", "does-what-it-claims": "4", "better-than-others": "3", "easy-to-use": "5" }, "satisfaction-score": "4", "recommend": "4", "suggestions": "24/7 support would help a lot.", "price-comparison": "Not sure", "current-price": "correct", "price-limits": { "highest": "450", "lowest": "200" }, "email": "john.doe@example.org" }; survey.readOnly = true; $("#surveyElement").Survey({ model: survey }); ``` ### `src/json.js` ```js export const json = { "questionsOnPageMode": "singlePage", "headerView": "advanced", "pages": [{ "elements": [{ "type": "matrix", "name": "qualities", "title": "Please indicate if you agree or disagree with the following statements", "columns": [{ "value": 5, "text": "Strongly agree" }, { "value": 4, "text": "Agree" }, { "value": 3, "text": "Neutral" }, { "value": 2, "text": "Disagree" }, { "value": 1, "text": "Strongly disagree" }], "rows": [{ "value": "affordable", "text": "Product is affordable" }, { "value": "does-what-it-claims", "text": "Product does what it claims" }, { "value": "better-than-others", "text": "Product is better than other products on the market" },{ "value": "easy-to-use", "text": "Product is easy to use" }] }, { "type": "rating", "name": "satisfaction-score", "title": "How satisfied are you with our product?", "minRateDescription": "Not satisfied", "maxRateDescription": "Completely satisfied" }, { "type": "rating", "name": "recommend", "visibleIf": "{satisfaction-score} > 3", "title": "How likely are you to recommend our product to a friend or co-worker?", "minRateDescription": "Will not recommend", "maxRateDescription": "I will recommend" }, { "type": "comment", "name": "suggestions", "title": "What would make you more satisfied with our product?" }] }, { "elements": [{ "type": "radiogroup", "name": "price-comparison", "title": "Compared to our competitors, do you feel our product is:", "choices": [ "Less expensive", "Priced about the same", "More expensive", "Not sure" ] }, { "type": "radiogroup", "name": "current-price", "title": "Do you feel our current price is merited by our product?", "choices": [ "correct|Yes, the price is about right", "low|No, the price is too low for your product", "high|No, the price is too high for your product" ] }, { "type": "multipletext", "name": "price-limits", "title": "What is the highest and lowest price you would pay for a product like ours?", "items": [{ "name": "highest", "title": "Highest" }, { "name": "lowest", "title": "Lowest" }] }] }, { "elements": [{ "type": "text", "name": "email", "title": "Please leave your email address if you would like us to contact you." }] }] }; ``` ### `src/theme.js` ```js export const themeJson = {}; ``` ### `package.json` ```json { "dependencies": { "jquery": "latest", "survey-core": "latest", "survey-js-ui": "latest", "survey-pdf": "latest" } } ``` ## Other Frameworks - [Angular](https://surveyjs.io/pdf-generator/examples/how-to-create-read-only-pdf-form/angular.md) - [React](https://surveyjs.io/pdf-generator/examples/how-to-create-read-only-pdf-form/reactjs.md) - [Vue 3](https://surveyjs.io/pdf-generator/examples/how-to-create-read-only-pdf-form/vue3js.md) - [Vanilla JS](https://surveyjs.io/pdf-generator/examples/how-to-create-read-only-pdf-form/vanillajs.md)