Convert PDF Form to Blob, Base64 URL, or Raw PDF


                        
    
        Survey.StylesManager.applyTheme("defaultV2");
    



                
                    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,
  "widthMode": "responsive",
  "showQuestionNumbers": 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);
            });
        
        
            ReactDOM.render(
            <SurveyReact.Survey model={survey}  />, document.getElementById("surveyElement"));
        
function prepareSurveyPDF() {
    const surveyPDF = new SurveyPDF.SurveyPDF(json);
    surveyPDF.data = survey.data;
    return surveyPDF;
}
function savePdfAsFile() {
    const surveyPDF = prepareSurveyPDF();
    surveyPDF.save("surveyAsFile.pdf");
}
function savePdfViaBlob() {
    const surveyPDF = prepareSurveyPDF();
    surveyPDF.raw("bloburl").then(function(bloburl) {
        const a = document.createElement("a");
        a.href = bloburl;
        a.download = "surveyViaBlob.pdf";
        document.body.appendChild(a);
        a.click();
    });
}
function previewPdf() {
    const surveyPDF = prepareSurveyPDF();
    const oldFrame = document.getElementById("pdf-preview-frame");
    if (oldFrame) oldFrame.parentNode.removeChild(oldFrame);
    surveyPDF.raw("dataurlstring").then(function(dataurl) {
        const 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);
        const 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 PDF", action: savePdfAsFile
});
survey.addNavigationItem({
    id: "survey_save_via_blob", title: "Save via Blob", action: savePdfViaBlob
});
survey.addNavigationItem({
    id: "survey_pdf_preview", title: "Preview PDF", action: previewPdf
});
                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Save PDF Form as a File, Raw PDF, Blob, or Base64 URL | Reactjs Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">
<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 style="margin: 0">
    
<div id="pdf-preview"></div>            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

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

</body>
</html>

Besides being able to download fillable survey forms as document files in a traditional PDF format, you can get them in other formats as well. These formats are mainly used to display PDF content in HTML inline, transfer PDF forms over the web, or store them in a database. This example shows how to get raw PDF content or convert it to Blob or a Base64-encoded data URL.

Get Raw PDF Content

You can get a string value that includes document metadata and content according to the PDF specification. To do this, call the raw(type) method without arguments:

surveyPDF.raw().then((rawcontent) => {
  // ...
});

Convert PDF to Blob

A Blob (or Binary Large Object) is an array of binary data. The Blob format is designed primarily to store images, video, and other multimedia content. To export a PDF document as a Blob or Blob URL, pass "blob" or "bloburl" to the raw(type) method of a SurveyPDF instance:

surveyPDF.raw("blob").then((blob) => {
  // ...
});
surveyPDF.raw("bloburl").then((bloburl) => {
  // ...
});

This demo shows how you can save an editable PDF document directly (by calling the save() method) or by getting a Blob URL first.

Convert PDF to Base64 Data URL

A Base64 Data URL is a string that contains Base64-encoded binary data preceded by the word data, an MIME type that indicates the data type, and an optional base64 prefix for non-textual data. Data URLs are mostly used to insert media content into HTML inline. Refer to the following MDN article for more information: Data URLs.

To get a survey PDF file as a data URL, pass "dataurlstring" to the raw(type) method:

surveyPDF.raw("dataurlstring").then((dataurlstring) => {
  // ...
});

This demo uses a data URL to display a preview of a survey PDF file.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.