Survey.StylesManager.applyTheme("modern");
var json = {
"elements": [
{
"type": "text",
"name": "first_name",
"title": "First Name",
"defaultValue": "John"
},
{
"type": "text",
"name": "last_name",
"title": "Last Name",
"defaultValue": "Doe"
}
],
"focusFirstQuestionAutomatic": false
};
window.survey = new Survey.Model(json);
survey.onComplete.add(function(sender) {
document.querySelector('#surveyResult').textContent =
"Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
function onAngularComponentInit() {
Survey.SurveyNG.render("surveyElement", {
model: survey
});
}
var HelloApp =
ng.core
.Component({
selector: 'ng-app',
template: '<div id="surveyContainer" class="survey-container contentcontainer codecontainer"><div id="surveyElement"></div></div> '})
.Class({
constructor: function() {
},
ngOnInit: function() {
onAngularComponentInit();
}
});
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.bootstrap(HelloApp);
});
function prepareSurveyPDF() {
const surveyPDF = new SurveyPDF.SurveyPDF(json);
surveyPDF.data = survey.data;
return surveyPDF;
}
function savePdfAsFile() {
const surveyPDF = prepareSurveyPDF();
surveyPDF.save("surveyAsFile.pdf");
}
function savePdfAsBlob() {
const surveyPDF = prepareSurveyPDF();
surveyPDF.raw("bloburl").then(function(bloburl) {
var a = document.createElement("a");
a.href = bloburl;
a.download = "surveyAsBlob.pdf";
document.body.appendChild(a);
a.click();
});
}
function previewPdf() {
const surveyPDF = prepareSurveyPDF();
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);
});
}
survey.navigationBar.getActionById("sv-nav-complete").visible = false;
survey.addNavigationItem({
id: "survey_save_as_file", title: "Save as file", action: savePdfAsFile
});
survey.addNavigationItem({
id: "survey_save_as_blob", title: "Save as BLOB", action: savePdfAsBlob
});
survey.addNavigationItem({
id: "survey_pdf_preview", title: "PDF preview", action: previewPdf
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Save options, Angular Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://npmcdn.com/zone.js"></script>
<script src="https://npmcdn.com/core-js@2.6.5/client/shim.min.js"></script>
<script src="https://npmcdn.com/rxjs@5.0.0-beta.6/bundles/Rx.umd.js"></script>
<script src="https://npmcdn.com/@angular/core@2.0.0-rc.5/bundles/core.umd.js"></script>
<script src="https://npmcdn.com/@angular/common@2.0.0-rc.5/bundles/common.umd.js"></script>
<script src="https://npmcdn.com/@angular/compiler@2.0.0-rc.5/bundles/compiler.umd.js"></script>
<script src="https://npmcdn.com/@angular/platform-browser@2.0.0-rc.5/bundles/platform-browser.umd.js"></script>
<script src="https://npmcdn.com/@angular/platform-browser-dynamic@2.0.0-rc.5/bundles/platform-browser-dynamic.umd.js"></script>
<script src="/DevBuilds/survey-angular/survey.angular.min.js"></script>
<link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="./index.css">
<link href="/DevBuilds/survey-core/modern.css" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/jspdf/dist/polyfills.umd.js"></script>
<script src="https://unpkg.com/jspdf@2.3.0/dist/jspdf.umd.min.js"></script> <script src="/DevBuilds/survey-pdf/survey.pdf.min.js"></script>
</head>
<body>
<div id="pdf-preview"></div> <ng-app></ng-app>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
SurveyPDF save options
You may download PDF document as file or get Javascript string or blob objects
Download file
Call
save method of surveyPDF object with optional filename parameter to download file in browser.
This is asynchronous method
var surveyPDF = new SurveyPDF.SurveyPDF(json);
surveyPDF.save("pdfDocument.pdf");
Get string object
Call
raw method of surveyPDF object without parameters to get PDF document
as string object. Attention that Javascript strings can't represent all possible bytes combinations of
PDF documents, so gotten PDF may be corrupted (e.g. missing bold or fonts mismatch).
This is asynchronous method
Note: use only with default jspdf fonts.
var surveyPDF = new SurveyPDF.SurveyPDF(json, { fontName: "helvetica" });
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();
});
Get Blob object
Pass
blob string parameter to
raw method to get Blob object,
or pass
bloburl string to get url to Blob
var surveyPDF = new SurveyPDF.SurveyPDF(json);
surveyPDF.raw("bloburl").then(function (bloburl) {
var a = document.createElement("a");
a.href = bloburl;
a.download = filename;
document.body.appendChild(a);
a.click();
});
Get base64 URL
Pass
dataurlstring string parameter to
raw method to get base64 encoded url string
to PDF document. You may use it to preview PDF on site in
embed html tag
var surveyPDF = new SurveyPDF.SurveyPDF(json);
surveyPDF.raw("dataurlstring").then(function (dataurl) {
var pdfEmbed = document.createElement("embed");
pdfEmbed.setAttribute("type", "application/pdf");
pdfEmbed.setAttribute("style", "width:100%");
pdfEmbed.setAttribute("height", 600);
pdfEmbed.setAttribute("src", dataurl);
var previewDiv = document.getElementById("pdf-preview");
previewDiv.appendChild(pdfEmbed);
});