Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 18. Juli 2012

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.

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

Anzeige

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.

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)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

7 Kommentare

  1. Mittlerweile interpretieren alle gängigen Browser dieses Attribut, zum Glück… :)

  2. 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.

  3. Wie sieht es mit den Browsern aus? Funktioniert das auch mit dem IE7+?

  4. 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.

Schreibe einen Kommentar

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