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://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@1.5.3/dist/jspdf.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>
<link href="/DevBuilds/surveyjs-widgets/surveyjs-widgets.js" type="text/css" rel="stylesheet"/>
<script src="/DevBuilds/survey-pdf/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>