---
title: Convert PDF Form to Blob, Base64 URL, or Raw PDF
product: PDF Generator
description: Download a fillable PDF form as a PDF file or get the form as Blob, Base64 URL, or raw PDF to preview it in your app or send it to a web server. View our free demo for JavaScript to learn more.
framework: Vanilla JS
source: https://surveyjs.io/pdf-generator/examples/convert-pdf-form-blob-base64-raw-pdf-javascript/vanillajs
index: https://surveyjs.io/pdf-generator/examples/overview.md
---

# Convert PDF Form to Blob, Base64 URL, or Raw PDF (Vanilla JS)

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)`](https://surveyjs.io/pdf-generator/documentation/surveypdf#raw) method without arguments:

```js
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:

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

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

## 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs).

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

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

## Files

### `public/index.html`

```html
<div style="display: flex;">
    <div id="surveyElement" style="flex: 1 1 0%; height: 100%; min-width: 0;"></div>
    <div id="pdf-preview" style="flex: 0.7 0.7 0%; display: none">
        <embed id="pdf-preview-frame" type="application/pdf" style="width:100%; height:100%;" />
    </div>
</div>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import { Model } from "survey-core";
import "survey-js-ui";
import { SurveyPDF } from "survey-pdf";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

function createSurveyPdfModel (surveyModel) {
    const surveyPDF = new SurveyPDF(json);
    if (surveyModel) {
        surveyPDF.data = surveyModel.data;
        surveyPDF.locale = surveyModel.locale;
        
        
    }
    
    return surveyPDF;
}
function saveSurveyToPdf (filename, surveyModel) {
    const pdfDoc = createSurveyPdfModel(surveyModel);
    if (!pdfDoc) return;

    pdfDoc.save(filename);
}

const previewDiv = document.getElementById("pdf-preview");
const previewEmbed = document.getElementById("pdf-preview-frame");
let pdfBlobUrl;

function showPdfPreview(surveyModel) {
    if (!previewDiv || !previewEmbed) return;

    const pdfDoc = createSurveyPdfModel(surveyModel);
    if (!pdfDoc) return;

    pdfDoc.raw("blob").then((blob) => {
        if (pdfBlobUrl) {
            URL.revokeObjectURL(pdfBlobUrl);
        }
        pdfBlobUrl = URL.createObjectURL(blob);
        previewEmbed.setAttribute("src", pdfBlobUrl);
        previewDiv.style.display = "block";
    });
}

function previewPdf(surveyModel) {
    if (!previewDiv) return;

    if (previewDiv.style.display !== "none") {
        previewDiv.style.display = "none";
        return;
    }

    showPdfPreview(surveyModel);
}

const survey = new Model(json);
survey.showCompleteButton = false;
survey.navigationButtonsLocation = "topBottom";
survey.addNavigationItem({
    id: "survey_save_as_file",
    title: "Download PDF",
    action: () => {
        saveSurveyToPdf("surveyResult.pdf", survey);
    }
});
survey.addNavigationItem({
    id: "survey_pdf_preview",
    title: "Preview PDF",
    visible: window.navigator.pdfViewerEnabled,
    action: () => {
        previewPdf(survey);
    }
});
survey.render(document.getElementById("surveyElement"));
```

### `src/json.js`

```js
export const json = {
  "elements": [
    {
      "type": "text",
      "name": "first_name",
      "title": "First Name",
      "defaultValue": "John"
    },
    {
      "type": "text",
      "name": "last_name",
      "title": "Last Name",
      "defaultValue": "Doe"
    }
  ]
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "survey-core": "latest",
    "survey-js-ui": "latest",
    "survey-pdf": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/pdf-generator/examples/convert-pdf-form-blob-base64-raw-pdf-javascript/angular.md)
- [React](https://surveyjs.io/pdf-generator/examples/convert-pdf-form-blob-base64-raw-pdf-javascript/reactjs.md)
- [Vue 3](https://surveyjs.io/pdf-generator/examples/convert-pdf-form-blob-base64-raw-pdf-javascript/vue3js.md)
- [jQuery](https://surveyjs.io/pdf-generator/examples/convert-pdf-form-blob-base64-raw-pdf-javascript/jquery.md)