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:

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)