Response.blob() — Methode · JavaScript-Referenz

Signatur

Response.prototype.blob()

Beschreibung

Die Methode blob() des Response-Interfaces liest den Body-Stream einer Antwort bis zum Ende und gibt ein Promise zurück, das mit einem Blob-Objekt erfüllt wird. Der type des Blobs wird aus dem Content-Type-Header der Antwort übernommen. Fehlt der Header, ist type ein leerer String.

Verwende blob() für binäre Daten, die du als Ganzes weiterverarbeiten willst, z. B. Bilder, PDFs, Audio oder Downloads. Einen Blob kannst du mit URL.createObjectURL() in eine Objekt-URL umwandeln, per FormData wieder hochladen, in IndexedDB speichern oder mit createImageBitmap() dekodieren.

Der Body einer Response lässt sich nur einmal auslesen. Nach dem Aufruf ist response.bodyUsed gleich true. Jeder weitere Aufruf von blob(), json(), text() usw. schlägt mit einem TypeError fehl. Brauchst du den Inhalt mehrfach, erzeuge vorher mit response.clone() eine Kopie.

Rückgabewert

Typ

Promise<Blob>

Beschreibung

Ein Promise, das mit einem Blob mit dem vollständigen Body-Inhalt erfüllt wird. Es wird mit einem TypeError abgelehnt, wenn der Body schon gelesen wurde oder gesperrt ist, und mit einem AbortError, wenn die Anfrage abgebrochen wurde.

Beispiele

Bild laden und per Objekt-URL anzeigen

const loadImage = async (url) => {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP-Fehler: ${response.status}`);
  }
  const blob = await response.blob();
  console.log(blob.type, blob.size);

  const img = document.createElement('img');
  const objectUrl = URL.createObjectURL(blob);
  img.src = objectUrl;
  // Speicher freigeben, sobald das Bild geladen ist
  img.onload = () => URL.revokeObjectURL(objectUrl);
  document.body.append(img);
};

loadImage('/bilder/logo.png');

image/png 18342

Datei-Download mit eigenem Dateinamen

const downloadFile = async (url, filename) => {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`Download fehlgeschlagen: ${response.status}`);

  const blob = await response.blob();
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
  URL.revokeObjectURL(link.href);
};

downloadFile('/api/rechnung/4711', 'rechnung-4711.pdf');

Body einmal lesen – mit clone() doppelt nutzen

const response = await fetch('/daten/bericht.csv');
const kopie = response.clone();

const blob = await response.blob();
const text = await kopie.text();

console.log(blob.size, text.split('\n').length);
console.log(response.bodyUsed);

// Ein zweiter Aufruf ohne clone() würde fehlschlagen:
try {
  await response.blob();
} catch (err) {
  console.log(err.name);
}

2048 42 true TypeError

Response-Objekt direkt erzeugen (z. B. im Service Worker)

const response = new Response('Hallo Welt', {
  headers: { 'Content-Type': 'text/plain; charset=utf-8' }
});

const blob = await response.blob();
console.log(blob.type, blob.size);
console.log(await blob.text());

text/plain;charset=utf-8 10 Hallo Welt

// Wichtig · Fallstricke

HTTP-Fehler werfen keinen Fehler: fetch() lehnt bei 404 oder 500 nicht ab. Prüfe deshalb vor blob() immer response.ok, sonst bekommst du z. B. eine HTML-Fehlerseite als Blob.
Nur einmal lesbar: Ein zweites Auslesen des Bodys führt zu einem TypeError. Nutze dafür response.clone(), und zwar vor dem ersten Lesen.
Speicherbedarf: blob() hält den ganzen Inhalt im Speicher. Für sehr große Dateien oder Fortschrittsanzeigen liest du besser response.body als ReadableStream Stück für Stück.
Objekt-URLs freigeben: URLs aus URL.createObjectURL() bleiben bestehen, bis die Seite verlassen wird. Gib sie mit URL.revokeObjectURL() frei, sonst entstehen Speicherlecks.
Opake Antworten: Bei mode: 'no-cors'-Anfragen an fremde Ursprünge ist die Antwort opak. blob() liefert dann einen leeren Blob mit Größe 0. Für echten Zugriff muss der Server CORS-Header senden.
MIME-Typ ist nicht vertrauenswürdig: blob.type kommt aus dem Server-Header. Nutzerinhalte aus fremden Quellen (etwa HTML oder SVG) nicht ungeprüft per Objekt-URL im eigenen Ursprung einbinden, da sonst XSS droht.
Kompatibilität: Alle modernen Browser unterstützen die Methode, ebenso Node.js ab Version 18 (natives fetch) und Deno. Internet Explorer unterstützt sie nicht.

Siehe auch

Response Response.prototype.json() Response.prototype.text() Response.prototype.clone() Response.body Blob