Survey.StylesManager.applyTheme("defaultV2");
if (typeof SurveyKo === "undefined")
SurveyKo = Survey;
SurveyKo
.StylesManager
.applyTheme();
SurveyCreator
.StylesManager
.applyTheme();
SurveyKo
.Serializer
.addProperties("survey", [
{
name: "pdfOrientation",
category: "PDF",
default: "auto",
choices: [
"auto", "portrait", "landscape"
],
isSerializable: false
}, {
name: "pdfFormatType",
category: "PDF",
default: "default",
choices: [
"custom",
"default",
"a0",
"a1",
"a2",
"a3",
"a4",
"a5",
"a6",
"a7",
"a8",
"a9",
"a10",
"b0",
"b1",
"b2",
"b3",
"b4",
"b5",
"b6",
"b7",
"b8",
"b9",
"b10",
"c0",
"c1",
"c2",
"c3",
"c4",
"c5",
"c6",
"c7",
"c8",
"c9",
"c10",
"dl",
"letter",
"government-letter",
"legal",
"junior-legal",
"ledger",
"tabloid",
"credit-card"
],
isSerializable: false
}, {
name: "pdfFormatWidth:number",
category: "PDF",
default: 210.0,
dependsOn: "pdfFormatType",
visibleIf: function (obj) {
return obj.pdfFormatType === "custom";
},
isSerializable: false
}, {
name: "pdfFormatHeight:number",
category: "PDF",
default: 297.0,
dependsOn: "pdfFormatType",
visibleIf: function (obj) {
return obj.pdfFormatType === "custom";
},
isSerializable: false
}, {
name: "pdfFontSize:number",
category: "PDF",
default: SurveyPDF.DocOptions.FONT_SIZE,
isSerializable: false
}, {
name: "pdfFontName:string",
category: "PDF",
default: 'segoe',
isSerializable: false
}, {
name: "pdfMarginTop:number",
category: "PDF",
default: 10.0,
isSerializable: false
}, {
name: "pdfMarginBottom:number",
category: "PDF",
default: 10.0,
isSerializable: false
}, {
name: "pdfMarginLeft:number",
category: "PDF",
default: 10.0,
isSerializable: false
}, {
name: "pdfMarginRight:number",
category: "PDF",
default: 10.0,
isSerializable: false
}, {
name: "pdfHtmlRenderAs",
category: "PDF",
default: "auto",
choices: [
"auto", "standard", "image"
],
isSerializable: false
}, {
name: "pdfMatrixRenderAs",
category: "PDF",
default: "auto",
choices: [
"auto", "list"
],
isSerializable: false
}, {
name: "pdfCompress:boolean",
category: "PDF",
default: false,
isSerializable: false
}, {
name: "pdfMode",
category: "PDF",
default: "edit",
choices: [
"edit", "display"
],
isSerializable: false
}, {
name: "pdfFileName:string",
category: "PDF",
default: 'survey_result.pdf',
isSerializable: false
}
]);
SurveyKo
.Serializer
.addProperty("question", {
name: "pdfIsPageBreak:boolean",
category: "PDF",
default: false
});
SurveyKo
.Serializer
.findProperty("html", "renderAs")
.category = "PDF";
SurveyKo
.Serializer
.findProperty("matrix", "renderAs")
.category = "PDF";
SurveyKo
.Serializer
.findProperty("matrixdropdown", "renderAs")
.category = "PDF";
const creator = new SurveyCreator.SurveyCreator("surveyElement");
const savePdfCallback = function () {
const options = {
fontSize: creator.survey.pdfFontSize,
fontName: creator.survey.pdfFontName,
margins: {
left: creator.survey.pdfMarginLeft,
right: creator.survey.pdfMarginRight,
top: creator.survey.pdfMarginTop,
bot: creator.survey.pdfMarginBottom
},
htmlRenderAs: creator.survey.pdfHtmlRenderAs,
matrixRenderAs: creator.survey.pdfMatrixRenderAs,
compress: creator.survey.pdfCompress
};
if (creator.survey.pdfOrientation !== "auto") {
options.orientation = creator.survey.pdfOrientation;
}
if (creator.survey.pdfFormatType === "custom") {
options.format = [creator.survey.pdfFormatWidth, creator.survey.pdfFormatHeight]
} else if (creator.survey.pdfFormatType !== "default") {
options.format = creator.survey.pdfFormatType;
}
const surveyPDF = new SurveyPDF.SurveyPDF(creator.JSON, options);
surveyPDF.data = creator
.getPlugin("test")
.model
.simulator
.survey
.data;
surveyPDF.mode = creator.survey.pdfMode;
surveyPDF
.onRenderQuestion
.add(function (_, options) {
options
.bricks[0]
.isPageBreak = options.question.pdfIsPageBreak;
});
surveyPDF.save(creator.survey.pdfFileName);
};
creator
.toolbar
.actions
.push(new SurveyKo.Action({
id: "svd-save-pdf",
title: "Save PDF",
visible: new Survey.ComputedUpdater(() => creator.activeTab === "test"),
enabled: true,
action: savePdfCallback
}));
creator.render("surveyElement");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Integration Creator V2 with PDF, KnockoutjsV2 Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
<script src="/DevBuilds/survey-core/survey.core.min.js"></script>
<script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
<script src="/DevBuilds/survey-knockout-ui/survey-knockout-ui.min.js"></script>
<link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="./index.css">
<link href="/DevBuilds/survey-core/defaultV2.css" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/jspdf/dist/polyfills.umd.js"></script>
<script src="https://unpkg.com/jspdf@2.3.0/dist/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script src="/DevBuilds/survey-creator-core/survey-creator-core.js"></script>
<script src="/DevBuilds/survey-creator-knockout/survey-creator-knockout.js"></script>
<link href="/DevBuilds/survey-creator-core/survey-creator-core.css" type="text/css" rel="stylesheet"/>
<style>
:root {
--tab-min-height: 600px;
}
</style> <script src="/DevBuilds/survey-pdf/survey.pdf.min.js"></script>
</head>
<body style="margin: 0">
<div id="surveyElement" style="display:inline-block;width:100%;">
</div>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>