It’s #FrontendFriday – Client Side File Download

16.10.2020

Im heutigen Blogpost zum #FrontendFriday geht es um das Thema „Client Side File Download“.

Möchte man bestimmte Daten als Datei herunterladen, wird hierfür in der Regel ein Webserver benötigt. Dabei wird vom Client eine Anfrage an den Server gestellt, der die benötigten Dateien bereitstellt und zum Download liefert. Dieser Server muss jedoch zuvor mühselig eingerichtet werden.

In bestimmten Fällen ist dies leider unumgänglich. Es gibt bestimmte Situationen, in denen ein File Download nötig ist, jedoch wäre ein extra Webserver zu aufwendig.

Ein Beispiel wäre ein einfacher Editor im Browser. Hierbei könnte man Text-, JSON-, CSV-,… Dateien hochladen, bearbeiten und anschließend im gleichen Format als Datei wieder herunterladen.

Dies lässt sich über einen einfach JavaScript Trick lösen.

Als erstes wird ein HTML Link benötigt. Das href Attribut sollte leer sein und durch das Download Attribut kann der Name der Datei bestimmt werden (Dateiendung beachten).

  <a id="download_link_txt" download="my_exported_file.txt" href=”” >Download as Text File</a>

Wenn der Inhalt aus der Variable „text“ heruntergeladen werden soll, könnte man folgenden Code verwenden:

var text = 'My super cool text';
var data = new Blob([text], {type: 'text/plain'});

var url = window.URL.createObjectURL(data);

document.getElementById('download_link_txt').href = url;

Die Magie geschieht mit window.URL.createObjectURL(data). Diese Methode erstellt ein Blob und gibt eine URL zurück, um auf die Datei zuzugreifen. Solange das Fenster bzw. der Tab nicht geschlossen wird, bleibt diese URL gültig. Beim Erstellen des Blobs muss auf den richtigen Datentyp geachtet werden. Häufig verwendete Datentypen sind „application/json“ oder „text/plain“.

Zum Schluss muss die erzeugte URL nun noch dem href Attribut des HTML Links zugewiesen werden. Dadurch startet der Download automatisch, sobald ein Klick auf den Link erfolgt.

document.getElementById('download_link_txt').setAttribute('href', url);

Jedes Mal, wenn createObjectURL () aufgerufen wird, wird eine neue Objekt-URL erstellt, die den Speicher belegt. Wenn die alte URL nicht mehr benötigt wird, sollten revokeObjectURL () aufgerufen werden, um den Speicher wieder freizugeben und zu schonen.

Ein Hands-On Beispiel gibt es hier:

Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.

Inhalt laden

 

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*Pflichtfelder

*