new Blob() — Methode · JavaScript-Referenz

Signatur

new Blob(blobParts, options)

Beschreibung

Mit new Blob() erzeugen Sie ein Blob (Binary Large Object), also einen unveränderlichen Block roher Daten mit optionalem MIME-Typ. Der Inhalt setzt sich aus den Teilen im Array blobParts zusammen. Diese werden in der angegebenen Reihenfolge verkettet.

Typische Einsatzfälle sind Datei-Downloads direkt im Browser (z. B. CSV- oder JSON-Export mit URL.createObjectURL()), das Hochladen von generierten Daten über FormData oder fetch(), das Erzeugen von Web Workern aus Code-Strings und das Zusammenfügen binärer Daten aus ArrayBuffers und typisierten Arrays.

Strings werden immer als UTF-8 kodiert. ArrayBuffer, TypedArray, DataView und andere Blobs werden unverändert als Bytes übernommen. Alle anderen Werte werden mit String() in Text umgewandelt. Nach dem Erzeugen lässt sich der Inhalt nicht mehr ändern. Mit blob.slice() können Sie aber Teilbereiche als neue Blobs herausschneiden. Zum Auslesen dienen blob.text(), blob.arrayBuffer() und blob.stream().

Parameter

Name	Typ	Default	Beschreibung
$blobParts	Array<string \| ArrayBuffer \| TypedArray \| DataView \| Blob>	[]	Iterierbares Objekt (meist ein Array) mit den Datenteilen, die zum Inhalt verkettet werden. Muss ein iterierbares Objekt sein: Ein einzelner String ohne Array führt zu falschem Ergebnis bzw. einem `TypeError`.
$options	object	{}	Optionales Konfigurationsobjekt.
$options.type	string	""	MIME-Typ des Blobs, z. B. `"text/csv"` oder `"application/json"`. Er wird in Kleinbuchstaben umgewandelt. Enthält er Zeichen außerhalb von ASCII 0x20–0x7E, wird er zu `""`.
$options.endings	"transparent" \| "native"	"transparent"	Legt fest, wie Zeilenumbrüche (`\n`) in String-Teilen behandelt werden. Bei `"native"` werden sie in das Format des Betriebssystems umgewandelt (unter Windows `\r\n`). `"transparent"` übernimmt sie unverändert.

Rückgabewert

Typ

Blob

Beschreibung

Ein neues Blob-Objekt. size enthält die Gesamtgröße in Bytes, type den angegebenen MIME-Typ.

Beispiele

Einfachen Text-Blob erzeugen und auslesen

const blob = new Blob(['Hallo, ', 'Welt! ✓'], { type: 'text/plain' });

console.log(blob.size); // Bytes, nicht Zeichen!
console.log(blob.type);

const text = await blob.text();
console.log(text);

16 text/plain Hallo, Welt! ✓

CSV-Export als Datei-Download

const rows = [
  ['Name', 'Alter'],
  ['Anna', 34],
  ['Jonas', 28]
];

const csv = rows.map((r) => r.join(';')).join('\n');
// BOM voranstellen, damit Excel UTF-8 korrekt erkennt
const blob = new Blob(['\uFEFF', csv], { type: 'text/csv;charset=utf-8' });

const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'personen.csv';
a.click();

// Speicher wieder freigeben
URL.revokeObjectURL(url);

JSON-Daten per fetch hochladen

const payload = { id: 42, tags: ['js', 'blob'] };
const blob = new Blob([JSON.stringify(payload)], { type: 'application/json' });

const form = new FormData();
form.append('datei', blob, 'daten.json');

const res = await fetch('/api/upload', { method: 'POST', body: form });
console.log(res.status);

200

Binärdaten zusammensetzen und Web Worker aus String erzeugen

// Binär: PNG-Signatur aus einem Uint8Array
const header = new Uint8Array([0x89, 0x50, 0x4e, 0x47]);
const bin = new Blob([header, new Uint8Array([0x0d, 0x0a])]);
console.log(bin.size);

// Worker aus Code-String
const code = 'self.onmessage = (e) => self.postMessage(e.data * 2);';
const workerUrl = URL.createObjectURL(new Blob([code], { type: 'text/javascript' }));
const worker = new Worker(workerUrl);
worker.onmessage = (e) => console.log('Ergebnis:', e.data);
worker.postMessage(21);

6 Ergebnis: 42

// Wichtig · Fallstricke

Immer ein Array übergeben: new Blob('text') wirft einen TypeError, weil der erste Parameter eine Sequenz sein muss. Richtig ist new Blob(['text']).
Objekte werden nicht serialisiert: new Blob([{ a: 1 }]) ergibt den Text "[object Object]". Verwenden Sie vorher JSON.stringify().
size zählt Bytes, nicht Zeichen. Umlaute und Emojis belegen in UTF-8 mehrere Bytes.
Den MIME-Typ prüft der Browser nicht. Er ist reine Metadaten-Angabe, bestimmt aber z. B., wie der Browser eine Objekt-URL darstellt.
Speicherlecks: Jede mit URL.createObjectURL() erzeugte URL hält den Blob im Speicher, bis URL.revokeObjectURL() aufgerufen oder das Dokument entladen wird.
Sicherheit: Blob-URLs mit dem Typ text/html oder image/svg+xml laufen im Ursprung der Seite. Wer daraus Nutzereingaben ungefiltert rendert, öffnet XSS-Lücken. Eine CSP mit blob: in script-src oder worker-src sollten Sie nur bewusst erlauben.
Sehr große Daten sollten Sie nicht komplett in einem String aufbauen. Übergeben Sie stattdessen mehrere Teile, oder nutzen Sie Streams.
Kompatibilität: Wird von allen modernen Browsern unterstützt. endings ist nicht in jeder älteren Engine verfügbar. In Node.js steht Blob ab Version 18 global zur Verfügung (vorher über require('buffer').Blob, ab 15.7).

Siehe auch

Blob File Blob.prototype.text() Blob.prototype.slice() URL.createObjectURL() FileReader FormData