Save options

Result
JavaScript
HTML
Documentation


                        

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