Survey.StylesManager.applyTheme("modern");
            
                var json = {
  "questions": [
    {
      "type": "tagbox",
      "choicesByUrl": {
        "url": "https://restcountries.eu/rest/v2/all"
      },
      "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://restcountries.eu/rest/v2/all"
      },
      "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",
      "choices": [
        "None",
        "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(result) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(result.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://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://surveyjs.azureedge.net/1.8.10/survey.ko.min.js"></script>
    <link rel="stylesheet" href="./index.css">
    <script src="https://surveyjs.azureedge.net/1.8.10/survey.pdf.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>