Benutzer:Samuel fiedler/createObjectURL

In JavaScript gibt es im URL-Namensraum die Funktion URL.createObjectURL und die Funktion URL.revokeObjectURL. Dieses Beispiel soll eine mögliche Nutzung darstellen.

Code

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>

Wie sie sehen, gibt es zuerst eine Überschrift, dann eine Textarea mit Label.
Darauf folgen zwei Eingabefelder mit je einer Beschriftung, davon hat das erste Eingabefeld Vorschläge mit Datalist.
Wichtig zu beachten ist, dass der Link (a) noch versteckt (hidden) ist.

JavaScript

// Funktion zum Generieren der URL
function generateURL() {
  // Input-Felder auslesen
  var inputText = document.getElementById("input_text").value;
  var inputType = document.getElementById("input_type").value;
  var inputName = document.getElementById("input_name").value;
  var link = document.getElementById("download");

  // Falls Link bereits vorhanden, Speicherleck vermeiden
  if (link.href) {
    URL.revokeObjectURL(link.href);
  }

  // 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();
}

Im JavaScript binden wir auf das Absenden des Formulars eine anonyme Funktion. Diese Funktion verhindert durch submitEvent.preventDefault() die standardmäßigen Aktionen, die bei einem Formular das Neuladen der Seite sind. Danach wird die Funktion generateURL ausgeführt.
In der Funktion generateURL werden erst alle Input-Daten ausgelesen, dann das Binary Large OBject (BLOB) erstellt und schlussendlich wird alles auf den Link gebunden. Das Ziel des Links wird über URL.createObjectURL erstellt und ist die Referenz zum BLOB.
Durch diese Referenz bleiben ständig alle Daten im Arbeitsspeicher, ohne die Referenz könnten die Daten einfach gelöscht werden. Daher wird zwischen dem Auslesen der Daten und der BLOB-Erstellung noch geprüft, ob der Link schon eine Adresse hat. Wenn ja, dann wird diese (alte) Object URL revoked, was heißt, dass die Referenz gelöscht werden kann, Speicher frei wird und kein Speicherleck entsteht.

Das fertige Beispiel

Beispiel ansehen …

Die Quellen stehen alle oben :)