JSFiddle - React, Tailwind, and code Playground

by Samuel_fiedler

HTML

<h1>Beispiel createObjectURL()</h1>
<p>
  Inhalt: <br />
  <textarea class="input_text" placeholder="Hallo Welt!" width="80" height="25"></textarea>
</p>
<p>
  MIME-Typ: <input type="text" class="input_type" placeholder="text/plain" /><br />
  Vorgeschlagener Dateiname: <input type="text" class="input_name" placeholder="dateiname.txt" /><br />
</p>
<p>
  <button class="generate">Download-URL generieren</button><br />
  <a href="" download="" class="download">Noch nichts</a>
</p>

CSS

body {
  font-family: Arial, sans-serif;
}

JavaScript

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

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

  // Alles auf den Link schmeißen
  var link = document.querySelector(".download");
  link.href = URL.createObjectURL(blob);
  link.download = inputName;
  link.textContent = "'" + inputName + "' herunterladen";
}

// Wenn das Dokument geladen ist...
window.addEventListener("DOMContentLoaded", function() {
  // ... füge Event-Listener hinzu!
  document.querySelector(".generate").addEventListener("click", generateURL);
});