JavaScript Academy · Lektion

Blobs und Object-URLs

Erstellen und verwenden Sie Blob-URLs für Downloads.

Blobs und Object-URLs ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist ein Blob?

Ein Blob (Binary Large Object) stellt unveränderliche Rohdaten wie Dateiinhalte im Speicher dar. Dateien sind eine besondere Art von Blob mit einem Namen und einem Änderungsdatum.

Mit Blobs können Sie Binärdaten im Browser erstellen, aufteilen und herunterladen.

Blob erstellen

Erstellen Sie einen Blob aus einem Array von Teilen (Zeichenfolgen, Puffern oder anderen Blobs) und einem Optionsobjekt, das den MIME-type festlegt.

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

console.log(blob.size);
console.log(blob.type);

Blob aus mehreren Teilen

Das Teile-Array wird in der angegebenen Reihenfolge zusammengefügt. Sie können Zeichenfolgen und typisierte Arrays kombinieren.

const blob = new Blob(['line 1\n', 'line 2\n', 'line 3'], {
  type: 'text/plain'
});

console.log(blob.size + ' bytes');

Blob wieder auslesen

Blobs stellen die Promise-basierten Methoden text(), arrayBuffer() und stream() bereit, um ihren Inhalt zu lesen.

async function show() {
  const blob = new Blob(['stored data'], { type: 'text/plain' });
  const text = await blob.text();
  console.log(text);
}

show();

Blob aufteilen

blob.slice(start, end) gibt einen neuen Blob zurück, der einen Teil des ursprünglichen Blobs umfasst, ohne den gesamten Inhalt zu kopieren. Das ist nützlich für Uploads in Teilstücken.

const blob = new Blob(['ABCDEFGHIJ'], { type: 'text/plain' });
const chunk = blob.slice(0, 5);

console.log(chunk.size);

Objekt-URL erstellen

URL.createObjectURL(blob) gibt eine kurzlebige URL zurück, die auf den im Speicher befindlichen Blob verweist. Sie können sie als img.src, als Link-href oder als Videoquelle verwenden.

const blob = new Blob(['data'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log(url.startsWith('blob:'));

Hochgeladenes Bild in der Vorschau anzeigen

Wandeln Sie eine ausgewählte Datei in eine Objekt-URL um und weisen Sie sie einem Bildelement zu, um sofort eine Vorschau anzuzeigen, ohne einen Server-Request zu benötigen.

const file = document.querySelector('#picker').files[0];
const url = URL.createObjectURL(file);
const img = document.querySelector('#preview');
img.src = url;

console.log('preview ready');

Download auslösen

Erstellen Sie einen Blob, erzeugen Sie eine Objekt-URL und lösen Sie einen Klick auf ein vorübergehendes Ankerelement mit dem Attribut download aus, um eine generierte Datei zu speichern.

function download(text, filename) {
  const blob = new Blob([text], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

download('report data', 'report.txt');

Objekt-URLs widerrufen

Objekt-URLs halten den Blob im Speicher, bis Sie URL.revokeObjectURL(url) aufrufen. Widerrufen Sie die URLs nach der Verwendung immer, um Speicherlecks zu vermeiden.

const blob = new Blob(['temp'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log('using ' + url);
URL.revokeObjectURL(url);
console.log('revoked');

Blobs und JSON

Sie können eine herunterladbare JSON-Datei erstellen, indem Sie Daten in einen Blob mit dem passenden MIME-Typ serialisieren.

const data = { name: 'Ada', score: 99 };
const blob = new Blob([JSON.stringify(data, null, 2)], {
  type: 'application/json'
});

console.log(blob.type);
console.log(blob.size + ' bytes');

Warum Blobs wichtig sind

Mit Blobs und Objekt-URLs können Sie Binärdaten vollständig clientseitig verarbeiten: Uploads in der Vorschau anzeigen, Downloads generieren und große Dateien in Teilstücken verarbeiten. Denken Sie daran, URLs nach der Verwendung zu widerrufen. Als Nächstes senden Sie Dateien mit fetch an einen Server.

const blob = new Blob(['export'], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
console.log('csv url created:', url.startsWith('blob:'));
URL.revokeObjectURL(url);

Schnelltest

Was sollten Sie nach der Verwendung einer Objekt-URL für einen Download aufrufen, um den Speicher freizugeben?

Zusammenfassung: Blobs und Objekt-URLs

Sie haben gelernt, Binärdaten zu verarbeiten:

new Blob(parts, { type }) erstellt unveränderliche Binärdaten.
Lesen Sie die Daten mit text() und arrayBuffer() und teilen Sie sie mit slice().
URL.createObjectURL erstellt eine nutzbare blob:-URL für Vorschauen und Downloads.
Rufen Sie nach der Verwendung immer URL.revokeObjectURL auf, um den Speicher freizugeben.

Häufig gestellte Fragen

Ist die Lektion „Blobs und Object-URLs“ kostenlos?

Ja — der vollständige Text von „Blobs und Object-URLs“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Blobs und Object-URLs“?

Erstellen und verwenden Sie Blob-URLs für Downloads. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Blobs und Object-URLs“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy