Custom Widgets

Example of export to PDF SurveyJS custom widgets via SurveyPDF

                        function renderSurvey(survey, element) {
    var vueContainer = document.createElement("div");
    element.appendChild(vueContainer);
    var app = new Vue({
        el: vueContainer,
        template: "<survey :survey='survey' />",
        data: {
            survey: survey
        }
    });
    survey.onAfterRenderSurvey.fire();
}



    
        Survey.StylesManager.applyTheme("orange");
    


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);
    });


var app = new Vue({ 
    el: '#surveyElement',
    data:
    {
        survey: survey
    }
});


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>
<head>
    <title>Example of export to PDF SurveyJS custom widgets via SurveyPDF, Vue Survey Library Example</title>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://surveyjs.azureedge.net/1.1.16/survey.vue.js"></script>
<link href="https://surveyjs.azureedge.net/1.1.16/survey.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<script src="https://surveyjs.azureedge.net/1.1.16/survey.pdf.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@3.3.11/dist/inputmask/dependencyLibs/inputmask.dependencyLib.js"></script>
<script src="https://unpkg.com/inputmask@3.3.11/dist/inputmask/inputmask.js"></script>
<script src="https://unpkg.com/inputmask@3.3.11/dist/inputmask/inputmask.numeric.extensions.js"></script>
<script src="https://cdn.ckeditor.com/4.7.3/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="https://surveyjs.azureedge.net/1.1.16/surveyjs-widgets.js"></script>

</head>
<body>
    <button id="saveToPDFbtn" style="margin:10px">Save to PDF</button>            <div id="surveyElement">
                <survey :survey='survey' />
            </div>
    <div id="surveyResult"></div>

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

</body>
</html>