createObjectUrl

by Rolf

HTML

<h1>Beispiel createObjectURL()</h1>

<form name="urlForm">
  <p>
    <label for="input_text">Inhalt: </label>
    <textarea id="input_text" width="80" height="25">Hallo Welt!</textarea>
  </p>
  <p>
    <label for="input_type">MIME-Typ: </label>
    <input type="text" id="input_type" list="mime" />
  </p>
  <p>
    <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>
  </p>
  <button>Download-URL generieren</button>
  <a hidden download="" id="download">Noch nichts</a>
</form>

CSS

p {
  display: flex;
  flex-flow: column nowrap;
  align-items: start;
}
label {
  display: block;
}

textarea {
  width: 100%;
  box-sizing: border-box;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
	const formElement = document.forms.urlForm,
        linkElement = document.getElementById("download");
        
  // Submit auf Form abfangen
  formElement.addEventListener("submit", (submitEvent) => {
    // Echten Submit verhindern
    submitEvent.preventDefault();
    // URL erzeugen und im Link ablegen
    generateURL();     
  });
  
  // Funktion zum Generieren der URL
  function generateURL() {
    // Input-Felder auslesen
    const inputText = formElement.input_text.value,
          inputType = formElement.input_type.value,
          inputName = formElement.input_name.value;

    // Falls URL bereits gesetzt, Speicherleck vermeiden
    if (linkElement.href) {
      URL.revokeObjectURL(linkElement.href);
    }

    // Binary Large OBject (BLOB) erstellen
    var blob = new Blob([inputText], {
      type: inputType
    });

    // Link-Element mit Download-URL versorgen und sichtbar machen
    linkElement.href = URL.createObjectURL(blob);
    linkElement.download = inputName;
    linkElement.textContent = "'" + inputName + "' herunterladen";
    linkElement.hidden = false;
  }
})