Blob — Schnittstelle · JavaScript-Referenz

Signatur

interface Blob

Beschreibung

Die Schnittstelle Blob (Binary Large Object) steht für einen Block unveränderlicher Rohdaten mit einem optionalen MIME-Typ. Blobs sind die Grundlage für Dateiverarbeitung im Browser: Die Schnittstelle File erbt von Blob, und viele APIs wie fetch(), FormData, XMLHttpRequest, URL.createObjectURL() oder canvas.toBlob() nehmen Blobs an oder liefern sie zurück.

Man erzeugt einen Blob mit new Blob(blobParts, options) aus Strings, ArrayBuffers, TypedArrays, DataViews oder anderen Blobs. Die wichtigsten Eigenschaften sind size (Größe in Bytes) und type (MIME-Typ). Gelesen wird der Inhalt über die Promise-basierten Methoden text(), arrayBuffer(), bytes() oder als Stream über stream(). Mit slice(start, end, contentType) entsteht ein neuer Blob, der einen Ausschnitt referenziert, ohne die Daten zu kopieren.

Typische Einsatzfälle sind clientseitig erzeugte Downloads (CSV, JSON, Bilder), Uploads in Teilstücken (Chunked Upload), Vorschaubilder für ausgewählte Dateien und das Weiterreichen von Binärdaten an Web Worker. Da Blobs unveränderlich sind, kann der Browser sie effizient verwalten und bei Bedarf auf die Festplatte auslagern.

Rückgabewert

Typ

Blob

Beschreibung

Ein neues Blob-Objekt mit den Eigenschaften size und type sowie den Methoden text(), arrayBuffer(), bytes(), stream() und slice().

Beispiele

Blob erzeugen und Inhalt lesen

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

const bytes = new Uint8Array(await blob.arrayBuffer());
console.log(bytes.slice(0, 5));

12 text/plain Hallo, Welt! Uint8Array(5) [72, 97, 108, 108, 111]

CSV-Datei clientseitig zum Download anbieten

const rows = [
  ['Name', 'Punkte'],
  ['Anna', 42],
  ['Jörg', 37]
];
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 = 'punkte.csv';
a.click();

// Speicher wieder freigeben
setTimeout(() => URL.revokeObjectURL(url), 1000);

Große Datei in Stücken hochladen mit slice()

const uploadInChunks = async (file, chunkSize = 1024 * 1024) => {
  for (let start = 0; start < file.size; start += chunkSize) {
    const chunk = file.slice(start, start + chunkSize);
    await fetch('/api/upload', {
      method: 'POST',
      headers: {
        'Content-Range': `bytes ${start}-${start + chunk.size - 1}/${file.size}`
      },
      body: chunk
    });
  }
  console.log(`Fertig: ${file.name}`);
};

document.querySelector('input[type=file]').addEventListener('change', (e) => {
  const [file] = e.target.files;
  if (file) uploadInChunks(file);
});

Fertig: video.mp4

Blob als Stream verarbeiten

const blob = new Blob(['Zeile 1\nZeile 2\nZeile 3']);
const reader = blob.stream().pipeThrough(new TextDecoderStream()).getReader();

let result = '';
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  result += value;
}
console.log(result.split('\n').length);

3

// Wichtig · Fallstricke

Speicherlecks: Jede mit URL.createObjectURL(blob) erzeugte URL hält den Blob im Speicher, bis URL.revokeObjectURL() aufgerufen oder das Dokument entladen wird. Bei vielen Vorschaubildern also unbedingt wieder freigeben.
size zählt Bytes: Strings werden als UTF-8 kodiert, Umlaute belegen daher 2 Bytes. new Blob(['ä']).size ergibt 2.
Unveränderlich: Ein Blob lässt sich nicht bearbeiten. Zum „Ändern“ baut man einen neuen, z. B. new Blob([alterBlob, 'Anhang']).
type wird nicht geprüft: Der MIME-Typ ist nur eine Angabe und wird nicht mit dem Inhalt abgeglichen. Bei Uploads immer serverseitig prüfen.
Sicherheit: Ein Blob mit type: 'text/html' kann über eine blob:-URL als Dokument im Ursprung der Seite ausgeführt werden. Nutzerdaten also nie ungeprüft als HTML- oder SVG-Blob ausliefern (XSS). Eine CSP kann blob: in script-src/frame-src einschränken.
Kompatibilität: text(), arrayBuffer() und stream() gibt es in allen modernen Browsern, bytes() erst seit 2024. In älteren Umgebungen stattdessen FileReader nutzen. In Node.js ist Blob seit v18 global verfügbar (vorher require('buffer').Blob).

Siehe auch

File Lock USB Attr CSS