Blob.text() — Methode · JavaScript-Referenz

Signatur

Blob.prototype.text()

Beschreibung

Die Methode text() des Blob-Interfaces liest die Daten eines Blobs vollständig ein und dekodiert sie immer als UTF-8. Das Ergebnis ist ein Promise, das mit dem entstandenen String aufgelöst wird. Weil File von Blob erbt, funktioniert die Methode auch direkt mit Dateien aus einem <input type="file"> oder aus Drag-and-Drop.

Gegenüber dem älteren FileReader.readAsText() ist text() deutlich kompakter: kein Event-Handling, keine Callbacks, sondern ein Promise, das sich direkt mit await verwenden lässt. Man benutzt es typischerweise zum Einlesen von Text-, CSV-, JSON- oder Konfigurationsdateien, zum Auswerten von Blobs aus fetch()-Antworten oder zum Prüfen dynamisch erzeugter Blobs.

Zu beachten: Die Methode ignoriert den type des Blobs und eine eventuell angegebene Zeichenkodierung. Ungültige UTF-8-Bytefolgen werden durch das Ersatzzeichen U+FFFD (�) ersetzt; ein führendes UTF-8-BOM wird entfernt. Für andere Kodierungen oder Binärdaten ist arrayBuffer() in Verbindung mit TextDecoder das richtige Werkzeug.

Rückgabewert

Typ

Promise<string>

Beschreibung

Ein Promise, das mit dem Inhalt des Blobs als UTF-8-dekodierter String erfüllt wird. Es wird abgelehnt, wenn das Lesen fehlschlägt (z. B. bei einer zwischenzeitlich gelöschten oder geänderten Datei, typischerweise mit einem NotReadableError).

Beispiele

Einfachen Blob auslesen

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

const inhalt = await blob.text();
console.log(inhalt);
console.log(blob.size); // Größe in Bytes, nicht in Zeichen

Hallo, Welt! 👋 18

Hochgeladene JSON-Datei einlesen

// HTML: <input type="file" id="config" accept=".json">
const input = document.querySelector('#config');

input.addEventListener('change', async () => {
  const [file] = input.files;
  if (!file) return;

  try {
    const text = await file.text();
    const config = JSON.parse(text);
    console.log('Geladene Einstellungen:', config);
  } catch (err) {
    console.error('Datei konnte nicht gelesen oder geparst werden:', err);
  }
});

Geladene Einstellungen: { theme: 'dark', lang: 'de' }

CSV-Datei in Zeilen zerlegen

const csv = new Blob(['name;alter\nAnna;31\nBen;27\n'], { type: 'text/csv' });

const zeilen = (await csv.text())
  .trim()
  .split(/\r?\n/)
  .slice(1) // Kopfzeile überspringen
  .map((zeile) => {
    const [name, alter] = zeile.split(';');
    return { name, alter: Number(alter) };
  });

console.log(zeilen);

[ { name: 'Anna', alter: 31 }, { name: 'Ben', alter: 27 } ]

Andere Kodierung per TextDecoder statt text()

// Bytes für „Grüße“ in ISO-8859-1 (Latin-1)
const bytes = new Uint8Array([0x47, 0x72, 0xFC, 0xDF, 0x65]);
const blob = new Blob([bytes]);

console.log(await blob.text()); // falsch dekodiert als UTF-8

const buffer = await blob.arrayBuffer();
console.log(new TextDecoder('iso-8859-1').decode(buffer));

Gr��e Grüße

// Wichtig · Fallstricke

Nur UTF-8: text() dekodiert immer als UTF-8, unabhängig vom type (auch bei text/plain;charset=windows-1252). Für andere Kodierungen arrayBuffer() + TextDecoder oder FileReader.readAsText(blob, encoding) verwenden.
Speicherbedarf: Der gesamte Inhalt wird auf einmal in den Speicher geladen. Bei sehr großen Dateien (mehrere hundert MB) besser blob.stream() mit TextDecoderStream nutzen und die Daten stückweise verarbeiten.
Größe ≠ Länge: blob.size zählt Bytes, string.length zählt UTF-16-Codeeinheiten – bei Umlauten oder Emojis weichen die Werte voneinander ab.
Sicherheit: Inhalte aus Nutzerdateien sind nicht vertrauenswürdig. Den gelesenen Text nie ungefiltert über innerHTML einfügen (XSS-Gefahr), sondern textContent verwenden.
Kompatibilität: Wird von Chrome 76+, Firefox 69+, Safari 14+ und Edge 79+ unterstützt, in Node.js ab Version 15.7 (Blob global ab 18). Für sehr alte Browser bleibt FileReader als Rückfallebene.

Siehe auch

Blob Blob.stream() Blob.bytes() File Response.text()