Survey.StylesManager.applyTheme("modern");
            
                var json = {
  "elements": [
    {
      "type": "tagbox",
      "choicesByUrl": {
        "url": "https://surveyjs.io/api/CountriesExample"
      },
      "name": "countries",
      "title": "Tagbox"
    },
    {
      "name": "date",
      "type": "datepicker",
      "inputType": "date",
      "title": "Datepicker",
      "dateFormat": "mm/dd/yy"
    },
    {
      "name": "bootdate",
      "type": "bootstrapdatepicker",
      "inputType": "date",
      "title": "Bootstrap Datepicker",
      "dateFormat": "mm/dd/yy"
    },
    {
      "type": "dropdown",
      "renderAs": "select2",
      "choicesByUrl": {
        "url": "https://surveyjs.io/api/CountriesExample"
      },
      "name": "countriesselect2",
      "title": "Select 2"
    },
    {
      "type": "radiogroup",
      "name": "position",
      "title": "ICheck radiogroup",
      "colCount": 0,
      "choices": [ "1|Designer", "2|Front-end Developer", "3|Back-end Developer", "4|Database Administrator", "5|System Engineer" ]
    },
    {
      "type": "barrating",
      "name": "bar",
      "ratingTheme": "fontawesome-stars",
      "title": "Barrating",
      "choices": [ "1", "2", "3", "4", "5" ]
    },
    {
      "type": "matrix",
      "name": "quality",
      "title": "ICheck matrix",
      "columns": [
        {
          "value": 1,
          "text": "Strongly Disagree"
        },
        {
          "value": 2,
          "text": "Disagree"
        },
        {
          "value": 3,
          "text": "Neutral"
        },
        {
          "value": 4,
          "text": "Agree"
        },
        {
          "value": 5,
          "text": "Strongly Agree"
        }
      ],
      "rows": [
        {
          "value": "affordable",
          "text": "Product is affordable"
        },
        {
          "value": "does what it claims",
          "text": "Product does what it claims"
        },
        {
          "value": "better then others",
          "text": "Product is better than other products on the market"
        },
        {
          "value": "easy to use",
          "text": "Product is easy to use"
        }
      ]
    },
    {
      "type": "sortablelist",
      "name": "lifepriority",
      "title": "SortableJS",
      "choices": [ "family", "work", "pets", "travels", "games" ]
    },
    {
      "type": "nouislider",
      "name": "range",
      "title": "NoUiSlider"
    },
    {
      "type": "signaturepad",
      "name": "sign",
      "title": "SignaturePad"
    },
    {
      "type": "text",
      "inputMask": "currency",
      "name": "currency",
      "title": "Inputmask"
    },
    {
      "type": "editor",
      "name": "ckeditor",
      "title": "CK Editor"
    },
    {
      "name": "autocomplete",
      "title": "Autocomplete",
      "type": "text",
      "hasNone": true,
      "choices": [
        "Ford",
        "Vauxhall",
        "Volkswagen",
        "Nissan",
        "Audi",
        "Mercedes-Benz",
        "BMW",
        "Peugeot",
        "Toyota",
        "Citroen"
      ]
    },
    {
      "type": "bootstrapslider",
      "name": "Bootstrap Slider",
      "step": 50,
      "rangeMin": 100,
      "rangeMax": 1000
    },
    {
      "type": "emotionsratings",
      "name": "emotionsratings-widget",
      "title": "Emotions Ratings",
      "choices": [ "1", "2", "3", "4", "5" ]
    }
  ]
};

                window.survey = new Survey.Model(json);
            
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
            
                survey.render("surveyElement");
            

function saveSurveyToPdf(filename, surveyModel, pdfWidth, pdfHeight) {
   var options = {
        format: [pdfWidth, pdfHeight]
    };
    var surveyPDF = new SurveyPDF.SurveyPDF(json, options);
    surveyPDF.data = surveyModel.data;
    surveyPDF.save(filename);
}

document.getElementById("saveToPDFbtn").onclick = function() {
  var pdfWidth = survey.pdfWidth || 210;
  var pdfHeight = survey.pdfHeight || 297;
  saveSurveyToPdf("surveyResult.pdf", survey, pdfWidth, pdfHeight);
};

                    

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of export to PDF SurveyJS custom widgets via SurveyPDF, Knockoutjs Survey Library Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
    <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/modern.css" type="text/css" rel="stylesheet"/><script src="https://unpkg.com/jspdf@2.3.0/dist/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/moment@2.24.0/moment.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" type="text/css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/icheck@1.0.2"></script>
<link rel="stylesheet" href="https://unpkg.com/icheck@1.0.2/skins/square/blue.css"/>
<script src="https://unpkg.com/jquery-bar-rating"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/jquery-bar-rating@1.2.2/dist/themes/fontawesome-stars.css"/>
<script src="https://unpkg.com/sortablejs@1.7.0/Sortable.js"></script>
<script src="https://unpkg.com/nouislider@9.2.0/distribute/nouislider.js"></script>
<script src="https://unpkg.com/wnumb@1.1.0"></script>
<link href="https://unpkg.com/nouislider@9.2.0/distribute/nouislider.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<script src="https://unpkg.com/inputmask@5.0.3/dist/inputmask.js"></script>
<script src="https://cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
<script src="https://unpkg.com/easy-autocomplete"></script>
<link rel="stylesheet" href="https://unpkg.com/easy-autocomplete@1.3.5/dist/easy-autocomplete.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.css" rel="stylesheet"/>
<script src="https://unpkg.com/emotion-ratings@2.0.1/dist/emotion-ratings.js"></script>
<script src="/DevBuilds/surveyjs-widgets/surveyjs-widgets.js"></script>
    <script src="/DevBuilds/survey-pdf/survey.pdf.min.js"></script>
    <script src="/DevBuilds/surveyjs-widgets/surveyjs-widgets.min.js"></script>

</head>
<body>
    
<button id="saveToPDFbtn" style="margin:10px">Save to PDF</button>            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

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

</body>
</html>