JavaScript/URL/createObjectURL

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.

Browserunterstützung
caniuse.com

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.

Syntax	objektUrl = URL.createObjectURL(objekt);
Parameter	objekt	Ein File, Blob oder MediaSource-Objekt.
Rückgabe	objektUrl	Ein String, der die Objekt-URL enthält, mit der sich das angegebene Objekt ansprechen lässt

Beachten Sie: Eine Objekt-URL enthält eine Referenz auf das angegebene Objekt und sorgt damit dafür, dass dieses Objekt vom Garbage Collector nicht freigegeben werden kann. Wenn die aktuelle Seite verlassen wird, werden zwar alle Ressourcen freigegeben, aber wenn Sie eine Single-Page Webseite erstellen, müssen Sie selbst darauf achten, dass nicht mehr genutzte Objekt-URLs wieder freigegeben werden, um Speicherlecks zu vermeiden. Dazu dient die Methode revokeObjectURL.

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.

HTML

<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:

JavaScript ansehen …

// 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