Beitragsbild mit Schreibmaschine, Megafone und verschiedenen Symbolen.
18. Juli 2012 2. Oktober 2024
Reading Time: 2 minutes

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

Markus Seyfferth

Markus Seyfferth

Autor Dr. Web

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)

Wie hilfreich fanden Sie diese Seite? Schreiben Sie Kritik und Anregungen auch gerne in die Kommentare!

Durchschnittliche Bewertung 4.5 / 5. Anzahl Bewertungen: 1515

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

  1. Avatar von Mario Ohibsky

    Mittlerweile interpretieren alle gängigen Browser dieses Attribut, zum Glück… 🙂

  2. Avatar von Burns

    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. Avatar von Kapcmen
    Kapcmen

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

    1. Avatar von mo
      mo

      nope ie 10 kann es nicht…

  4. Avatar von Tom

    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 😉

    1. Avatar von Felix
      Felix

      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.

      1. Avatar von Stefan
        Stefan

        Der a-Tag sollte aber vermutlich trotzdem geschlossen werden 😉

Schreibe einen Kommentar

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


Dr. Web Newsletter

Zum Newsletter anmelden

Kommen Sie wie über 6.000 andere Abonnenten in den Genuss des Dr. Web Newsletters. Als Dankeschön für Ihre Anmeldung erhalten Sie das große Dr. Web Icon-Set: 970 Icons im SVG-Format – kostenlos.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an kontakt@drweb.de
„✓ Bitte prüfen Sie Ihr Postfach und bestätigen Sie Ihre Anmeldung.“
Das große Dr. Web Icon-Set mit über 970 individuell anpassbaren Icons im SVG Format.