Integrate PDF Generator in Survey Creator
SurveyJS PDF Generator is a JavaScript UI component that enables you to render SurveyJS surveys and forms as PDF files directly in a browser. You can print these PDF forms for offline use, such as at conferences and workshops, or share editable forms with respondents to complete online. This example demonstrates how you can integrate PDF Generator into Survey Creator to generate and preview PDF forms as you configure them.
Install PDF Generator
PDF Generator is built upon the jsPDF library. Select and implement one of the following options to set up PDF Generator:
Option 1: Insert the jsPDF and PDF Generator scripts within the
<head>tag on your HTML page.<head> <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script> <script src="https://unpkg.com/survey-pdf/survey.pdf.min.js"></script> <!-- ... --> </head>Option 2: Install the
survey-pdfnpm package.
The jsPDF npm package will be installed automatically as a dependency.npm install survey-pdf --save
Add PDF Generator Settings to the Property Grid
PDF Generator settings allow you to customize page orientation, margins, font, and other document parameters (see IDocOptions). Survey Creator users can change these settings in the Property Grid. To make them available, add corresponding custom properties to the "survey" class:
Serializer.addProperty("survey", {
name: "pdfOrientation",
displayName: "Page orientation",
type: "buttongroup",
category: pdfCategoryName,
categoryIndex: 800,
default: "auto",
choices: [ "auto", "p|Portrait", "l|Landscape" ],
isSerializable: false
});
This demo also adds a custom pdfIsPageBreak property to the "question" class. When enabled for a question, this property inserts a page break before that question:
Serializer.addProperty("question", {
name: "pdfIsPageBreak:boolean",
displayName: "Insert a page break before this element",
category: pdfCategoryName,
categoryIndex: 800,
default: false,
isSerializable: false
});
Generate a PDF Form
To save a survey as a PDF document, follow the steps below:
Prepare the PDF document.
Use the PDF settings from the survey being configured to build anIDocOptionsobject and apply other customizations to the document.Instantiate
SurveyPDF.
Pass a survey JSON schema and theIDocOptionsobject to theSurveyPDFconstructor.Call the
save(fileName)method.
This method saves a PDF document under a specified name on the user's device.Add a custom toolbar button.
Combine steps 1 to 3 into a single function and call it by a click on a custom toolbar button.
Refer to the Code tab for a full code example.