JavaScript/URL/createObjectURL: Unterschied zwischen den Versionen

Version vom 4. Oktober 2023, 13:52 Uhr

Die Methode URL.createObjectURL erzeugt einen URL mit dem Schema "blob:", der das Objekt repräsentiert, das als Parameter übergeben wurde. Im Gegensatz zu einem Data-URL enthält ein Blob-URL nicht das vollständige Objekt in codierter Form, sondern lediglich eine Referenz auf das Objekt. Das Objekt selbst befindet sich im Speicher des Browsers. Vorlage:Iconset

Sie können Blob-URLs verwenden, um ein Datenobjekt im Arbeitsspeicher aufzubauen und es dann - ähnlich wie bei einer Data-URL - dem User über einen Link zum Download anzubieten. Da eine Blob-URL nur eine Referenz darstellt, entfällt hier die Umwandlung in einen base64-codierten String, was bei großen Objekten lohnend sein kann.

Das MediaStream API hat in einer früheren Version Blob-URLs vorausgesetzt, um die Datenquelle anzugeben. Das ist in aktuellen Browsern nicht mehr erforderlich, und die Browserhersteller entfernen die Unterstützung dafür.

Beispiel: Bereitstellen eines BLOB als Download-Link

Das folgende Beispiel verwendet URL.createObjectURL, um den Inhalt eines Blob-Objekts zum Download anzubieten. Für das Beispiel wird lediglich ein Blob mit einfachem Textinhalt verwendet, der aus einem Eingabefeld bestückt wird. Genauso gut könnte ein Blob aus generierten oder vom Server geladenen Daten erstellt werden.

<h1>Beispiel createObjectURL()</h1>
<form id="url_form">
 <label for="input_text">Inhalt: </label>
 <textarea id="input_text" width="80" height="25">Hallo Welt!</textarea>
 <label for="input_type">MIME-Typ: </label>
 <input type="text" id="input_type" list="mime" />
 <label for="input_name">Vorgeschlagener Dateiname: </label>
 <input type="text" id="input_name" value="test.txt" />
 <datalist id="mime">
 <option value="text/css" />
 <option value="text/html" />
 <option value="image/svg+xml" />
 <option value="text/plain" />
 </datalist>
 <button id="generate">Download-URL generieren</button>
 <a hidden download="" id="download">Noch nichts</a>
</form>

Das Beispiel verwendet eine Textarea zur Eingabe des Blob-Inhalts. Hinzu kommt ein Text-Eingabefeld, um einen Dateinamen für den Downloadlink vorzugeben, sowie ein Text-Eingabefeld für den MIME-Typ (unterstützt durch eine Datalist).

Hinzu kommt ein Submit-Button für das Eingabeformular, den wir mit JavaScript behandeln werden, sowie ein - zunächst verstecktes - a-Element, für das das download-Attribut gesetzt ist, um beim Anklicken einen Download zu erzwingen.

Das JavaScript für den Submit-Button sieht so aus:

// Funktion zum Generieren der URL
function generateURL() {
 var link = document.getElementById("download");
 // Falls Link bereits vorhanden, Speicherleck vermeiden
 if (link.href) {
 URL.revokeObjectURL(link.href);
 }
 // Input-Felder auslesen
 var inputText = document.getElementById("input_text").value;
 var inputType = document.getElementById("input_type").value;
 var inputName = document.getElementById("input_name").value;
 // Binary Large OBject (BLOB) erstellen
 var blob = new Blob([inputText], {
 type: inputType
 });
 // Alles auf den Link schmeißen
 link.href = URL.createObjectURL(blob);
 link.download = inputName;
 link.textContent = "'" + inputName + "' herunterladen";
 link.hidden = false;
}
// Event-Listener
document.getElementById("url_form").addEventListener("submit", function (submitEvent) {
 submitEvent.preventDefault();
 generateURL();
}

Das Script bindet eine anonyme Funktion an das submit-Event (das beim Absenden des Formulars ausgelöst wird). Diese Funktion stoppt zunächst mit preventDefault das normale Browserverhalten, die Formulardaten an den Server zu senden, und ruft dann die lokale Verarbeitung in der Funktion generateURL auf.

In generateURL() wird zunächst das Element für den Downloadlink ermittelt und geprüft, ob das href-Attribut bereits gesetzt ist. Wenn ja, erfolgt der Script-Aufruf nicht zum ersten Mal und es ist zwingend erforderlich, den existierenden URL zunächst mit URL.revokeObjectURL() freizugeben, um ein Speicherleck zu vermeiden.

Danach werden alle Eingabefelder ausgelesen und aus Texteingabe und MIME-Typ ein Binary Large OBject (BLOB) erstellt. Für diesen Blob wird mittels URL.createObjectURL ein Objekt-URL erstellt und im href-Attribut des Links gespeichert. Danach wird der eingegeben Wunsch-Dateiname über das download-Attribut bereitgestellt und der Link sichtbar gemacht.

Weblinks

• MDN Artikel zu createObjectURL
• MDN Das File Objekt
• MDN Das Blob Objekt
• MDN Media Source API

Abgerufen am 1.10.2025
von "http://wiki.selfhtml.org/wiki/JavaScript/URL/createObjectURL"