Integration Creator V2 with PDF

                        
    
        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>