Categories
Inspiration Tutorials

Download-Attribut bei Links: Dateien herunterladen statt sie im Browser zu öffnen

Werden Dateien in einem HTML-Dokument verlinkt, versucht der Browser zunächst immer, diese Datei innerhalb der Anwendung zu öffnen und darzustellen. Bei den meisten Bilddateien ist das so gewünscht und auch pei PDF-Dateien, insofern ein Plugin installiert ist, welches die Darstellung von PDFs innerhalb des Browserfensters ermöglicht, hat sich die Vorgehensweise etabliert. Manchmal ist es jedoch sinnvoll, beziehungsweise gewollt, eine Datei explizit zum Herunterladen anzubieten.

Anzeige


Bisher ließen sich Dateien nur über eine Angabe im HTTP-Header ausdrücklich zum Download anbieten:

Content-Disposition: attachment; filename="datei.jpg"

Um Dateien diese Angaben im Header mitzugeben, müssen sie über ein Download-Script angeboten werden. Mit HTML5 kann auf diese Header-Angabe verzichtet werden.

Spezielles Attribut bietet Dateien zum Herunterladen an

Das neue HTML5-Attribut „download“, welches zusammen mit dem A-Element eingesetzt wird, deklariert einen Link als Download-Ressource. In diesem Fall werden verlinkte Dateien – unabhängig davob, ob die Dateien auch im Browser geladen werden können – immer zum Herunterladen angeboten:

<a href="bild.jpg" download="Bild zum Herunterladen"</a>

Ähnlich wie bei der Angabe im HTTP-Header gibt es auch bei dieser clientseitigen Variante die Möglichkeit, einen alternativen Dateinamen anzugeben, unter dem die Datei beim Herunterladen gespeichert werden soll. Dieser Dateiname wird dem Download-Attribut als Wert zugewiesen:

<a href="bild.jpg" download="datei.jpg">Bild zum Herunterladen</a>

Wird ein separater Dateiname sowohl im HTTP-Header als auch im Download-Attribut angegeben, wird der Dateiname des HTTP-Headers verwendet. Die Angabe im Download-Attribut bleibt in diesem Fall unberücksichtigt.

Anzeige

Für den Einsatz in der Praxis ist das Download-Attribut bisher noch nicht geeignet. Nur Chrome kann die Angabe bislang interpretieren. Andere Browser ingorieren das Attribut.

Gestaltung per CSS

Wer das Download-Attribut dennoch verwendet, hat die Möglichkeit, Download-Links statt über eine Klasse über den Attribut-Selektor zu gestalten:

a[download] {
  font-weight: bold;
}

7 Kommentare zu “Download-Attribut bei Links: Dateien herunterladen statt sie im Browser zu öffnen”

Gut zu wissen; diese Info kann ich demnächst mal brauchen.
Übrigens:
<a href="bild.jpg" download="Bild zum Herunterladen"
kann wohl nicht ganz stimmen, oder?
Das fehlt noch was 😉

Nein, das wird schon alles sein. Das Vorhandensein von “download” löst die Funktion aus, das “Bild zum Herunterladen” ist nur der Text, der dazu angezeigt wird und der ist beliebig.

Hi, leider geht des auch nicht in Chromeium: Version 32.0.1700.102 Ubuntu 13.10 (32.0.1700.102-0ubuntu0.13.10.1~20140128.970.1)
Schade drum, ich könnte es gerauchen.

Schreibe einen Kommentar

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