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.surveyLiveTester.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.surveyLiveTester.toolbarItems.push({
    id: "svd-save-pdf",
    title: "Save PDF",
    visible: true,
    toolpit: "Save PDF",
    component: "svd-button",
    action: savePdfCallback
  });
                    

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Use PDF section in property grid to tune PDF options, Knockoutjs 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-knockout/survey.ko.min.js"></script>
    <link rel="stylesheet" href="./index.css">
<link href="/DevBuilds/survey-core/survey.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>
<link href="/DevBuilds/survey-creator/survey-creator.css" type="text/css" rel="stylesheet"/>
<script src="/DevBuilds/survey-creator/survey-creator.js"></script>    <script src="/DevBuilds/survey-pdf/survey.pdf.min.js"></script>

</head>
<body>
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>