Last updated
What Is a Blob?
A Blob (Binary Large Object) is a file-like object of immutable raw data in the browser. The Web Blob API lets you create, read, and manipulate binary data directly in JavaScript without any server round-trips. Blobs are the foundation for file downloads, object URLs, and the File API.
You can create a Blob from a string, an ArrayBuffer, or other Blobs.
Once created, you can generate an object URL with URL.createObjectURL(blob)
and use it as the href of a download link or the src of an image.
Creating and Downloading a Blob
JavaScript
// Create a text blob and trigger download
function downloadTextFile(content, filename, mimeType = 'text/plain') {
const blob = new Blob([content], { type: mimeType });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url); // free memory
}
downloadTextFile('Hello, World!', 'hello.txt');
// Create a JSON blob
const data = { name: 'Alice', age: 30 };
downloadTextFile(JSON.stringify(data, null, 2), 'data.json', 'application/json');
// Create a CSV blob
const csv = 'Name,Age
Alice,30
Bob,25';
downloadTextFile(csv, 'users.csv', 'text/csv');Blob MIME Types
| File type | MIME type |
|---|---|
| Plain text | text/plain |
| HTML | text/html |
| JSON | application/json |
| CSV | text/csv |
application/pdf | |
| PNG image | image/png |
| ZIP archive | application/zip |
Blob vs ArrayBuffer vs File
- Blob: Immutable raw data with a MIME type. Good for creating downloadable files.
- ArrayBuffer: Fixed-length raw binary buffer. Good for low-level byte manipulation.
- File: A Blob with a name and last-modified date. Returned by file input elements.
- FileReader: Reads a Blob/File asynchronously as text, ArrayBuffer, or data URL.