<!DOCTYPE html>
<html>
<head>
<title>Example of save PDF as file, string, blob or base64, jQuery Survey Library Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/jquery"></script>
<script src="https://surveyjs.azureedge.net/1.1.17/survey.jquery.js"></script>
<link href="https://surveyjs.azureedge.net/1.1.17/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.17/survey.pdf.js"></script>
</head>
<body>
<button id="saveAsFileBtn" style="margin:10px">Save as File</button>
<button id="saveAsStringBtn" style="margin:10px">Save as String</button>
<button id="saveAsBlobBtn" style="margin:10px">Save as Blob</button>
<button id="pdfPreviewBtn" style="margin:10px">PDF Preview</button>
<div id="pdf-preview"></div>
<div id="surveyElement"></div>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
function renderSurvey(survey, element) {
survey.render(element);
}
Survey
.StylesManager
.applyTheme("default");
var json = {
"questions": [
{
"type": "text",
"name": "savepdf",
"title": "Save me, pleaseee"
},
{
"type": "dropdown",
"name": "select",
"title": "Select",
"choices":[{ displayValue: 1, text: "Value 1" }, { displayValue: 2, text: "Value 2" }]
}
]
};
window.survey = new Survey.Model(json);
survey
.onComplete
.add(function (result) {
document
.querySelector('#surveyResult')
.textContent = "Result JSON:\n" + JSON.stringify(result.data, null, 3);
});
$("#surveyElement").Survey({model: survey});
function saveSurveyToPdf(filename, surveyModel, saveType) {
var surveyPDF = new SurveyPDF.SurveyPDF(json);
surveyPDF.data = surveyModel.data;
if (saveType === "saveAsFile") {
surveyPDF.save(filename);
} else if (saveType === "saveAsString") {
surveyPDF
.raw()
.then(function (text) {
var file = new Blob([text], {type: "application/pdf"});
var a = document.createElement("a");
a.href = URL.createObjectURL(file);
a.download = filename;
document
.body
.appendChild(a);
a.click();
});
} else if (saveType === "saveAsBlob") {
surveyPDF
.raw("bloburl")
.then(function (bloburl) {
var a = document.createElement("a");
a.href = bloburl;
a.download = filename;
document
.body
.appendChild(a);
a.click();
});
} else {
var oldFrame = document.getElementById("pdf-preview-frame");
if (oldFrame)
oldFrame
.parentNode
.removeChild(oldFrame);
surveyPDF
.raw("dataurlstring")
.then(function (dataurl) {
var pdfEmbed = document.createElement("embed");
pdfEmbed.setAttribute("id", "pdf-preview-frame");
pdfEmbed.setAttribute("type", "application/pdf");
pdfEmbed.setAttribute("style", "width:100%");
pdfEmbed.setAttribute("height", 200);
pdfEmbed.setAttribute("src", dataurl);
var previewDiv = document.getElementById("pdf-preview");
previewDiv.appendChild(pdfEmbed);
});
}
}
document
.getElementById("saveAsFileBtn")
.onclick = function () {
saveSurveyToPdf("surveyAsFile.pdf", survey, "saveAsFile");
}
document
.getElementById("saveAsStringBtn")
.onclick = function () {
saveSurveyToPdf("surveyAsString.pdf", survey, "saveAsString");
}
document
.getElementById("saveAsBlobBtn")
.onclick = function () {
saveSurveyToPdf("surveyAsBlob.pdf", survey, "saveAsBlob");
}
document
.getElementById("pdfPreviewBtn")
.onclick = function () {
saveSurveyToPdf("", survey, "pdfPreview");
}