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.
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.webp" 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.webp" 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.
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;
}
(dpe)
0 Antworten
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.
Der a-Tag sollte aber vermutlich trotzdem geschlossen werden 😉
Wie sieht es mit den Browsern aus? Funktioniert das auch mit dem IE7+?
nope ie 10 kann es nicht…
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.
Mittlerweile interpretieren alle gängigen Browser dieses Attribut, zum Glück… 🙂