Direkte Downloads mit dem „download“ Attribute

Ihr kennt sicher alle die Situation. Ihr habt Dateien auf eurer Website und möchtet es den Besuchern ermöglichen, diese einfach herunterladen zu können. Eigentlich eine ziemlich einfache Angelegenheit und ihr werdet euch jetzt vielleicht fragen, wieso ich hierzu einen Artikel schreibe. Nun, nicht alle Nutzer wissen, wie einfach das funktioniert. Wollt ihr es also für unerfahrene Nutzer so einfach wie möglich machen, solltet ihr euch meinen Tipp ansehen.

Das Standardverhalten von Links zu Dateien

Wie verlinkt ihr normalerweise zu einer Datei, die eure Besucher herunterladen können. Vermutlich mit einem einfachen Link, wie in diesem Beispiel:

<a href="http://example.com/bild.jpg">Bild herunterladen</a>

Die meisten von euch werden das Problem wohl sofort erkennen. Klick ein Nutzer auf einen solchen Link, dann wird das Bild nicht zum Download angeboten, sondern es öffnet ich im gleichen Tab. Der Browser zeigt in der Regel alle Dateien an, die er direkt darstellen kann. Das ist aber nicht wirklich was wir wollen. Wie also können wir das Problem lösen?

Erzieht die Nutzer

Ein erfahrener Nutzer würde vermutlich argumentieren, dass man doch gar nicht ändern muss. Man kann eine Datei ja sehr einfach speichern, indem man einen Rechtsklick macht und „Datei speichern unter…“ auswählt. Aber nicht jeder Nutzer kennt diese Möglichkeit. Daher findet man sehr häufig auf Websites einen kleinen Text, der dem Nutzer erklärt, wie es funktioniert. Da dieser Text aber eher stört, verwenden einige kleine Info-Symbole, die aber wiederum (z.B. in einen Popup) einen langen Infotext haben. Aber ist das wirklich nutzerfreundlich? Und klicken die Nutzer überhaupt auf dieses Icon? Wohl eher nicht.

Nutze ein wenig HTML Magie

Wenn jemand eine solche Frage in einer der vielen Gruppen oder Foren, die ich regelmäßig lese, stellt, dann bekommt er oft eine Antwort, die das Problem mit einem PHP-Skript löst. Dieses Skript liest die Datei aus, gibt des Inhalt davon an den Browser aus und setzt einige HTTP-Header, damit der Browser einen Download erzwingt. Aber dieser Lösungsweg erfordert ein zusätzliches PHP-Skript und man muss alle Links anpassen, damit sie dieses Skript verwenden. Das ist wirklich verdammt viel Arbeit für eine eigentlich so einfache Aufgabe. Geht es also nicht auch einfacher? Doch, es geht einfacher und ihr werdet nicht glauben, wie einfach es ist. Alles, was ihr tun müsst, ist ein einziges HTML Attribut zu diesen Links hinzuzufügen. Das „download“ Attribut:

<a href="http://example.com/bild.jpg" download>Bild herunterladen</a>

Es ist wirklich so einfach. Wenn der Nutzer nun auf einen solchen Link klickt, dass wir der „Datei speichern unter…“ Dialog geöffnet und die Datei kann direkt heruntergeladen werden. Hierbei wird der Original-Dateiname verwendet.

Den Namen der Download-Datei ändern.

Das ist wirklich sehr praktisch, aber was macht man, wenn die Datei einen sehr hässlichen oder zufälligen Namen hat? Nun, auch das ist sehr einfach. In dem Beispiel oben hat das Attribut keinen Wert. Solche Attribute haben eine „empty attribute syntax“, sie benötigen also keinen Wert, damit sie funktionieren. Aber anders als die meisten anderer solcher Attribute, verwendet man hier nicht „download“ oder „true“ als Wert, sondern schlichtweg den gewünschten Dateinamen der Download-Datei. Das Ändern auf einen schöneren Namen könnte also wie folgt aussehen:

<a href="http://example.com/4f82cf81e9.jpg" download="image.jpg">Bild herunterladen</a>

Ziemlich hübsch, oder? 😉

Bild im neuen Tab öffnen

Aber wie könnte nun ein Nutzer eine solche Datei in einem neuen Tab öffnen, wenn er sie nicht herunterladen möchte. Hierzu müsste er einen Rechtsklick machen und „Link im neuen Tab öffnen“ auswählen (ein CMD/STRG + Mausklick oder ein Mausradklick funktioniert hier nicht). Ihr solltet also gut überlegen, in welchen Fällen es Sinn macht, das Standardverhalten des Browsers zu ändern und einen Direktdownload zu erzwingen. Manche Nutzer ziehen es eher vor, Dateien wie Bilder und PDFs in einem neuen Fenster zu öffnen, statt diese direkt herunterzuladen.

Browserunterstützung

Ihr werdet euch jetzt vermutlich Fragen, welche Browser dieses Attribut unterstützen. Chrome, Firefox und Microsoft Edge tun das. Der Internet Explorer unterstützt es selbst in Version 11 nicht. Safari erst ab Version 10.1 und später, die aber noch nicht veröffentlicht sind. Auf mobilen Endgeräten unterstützen es fast alle Android Browser (abgesehen vom Opera mini und dem UC Browser). Auf iOS scheint es kein einziger Browser zu unterstützen. Das liegt sehr wahrscheinlich daran, dass man auf iOS keinen direkten Zugriff auf das Dateisystem hat. Ein Download macht also keinen Sinn, da der Nutzer die Datei anschließend eventuell gar nicht aufrufen könnte.

Fazit

Wenn es um die Nutzerfreundlichkeit geht, kann ein Dirketdownload durchaus Sinn machen. Gerade dann, wenn es sich um unerfahrene Nutzer handelt. Beachtet aber die Browserunterstützung und bietet eine Alternative an. Um fügt das Attribut bitte nicht jedem Link hinzu, denn er Nutzer erwartet in der Regel keinen direkten Download.

Ich hoffe, ihr fandet diesen Artikel hilfreich. Habt ihr denn das Attribut schon gekannt? Wo und weshalb habt ihr es schon einmal eingesetzt? Oder wie konnte es euch bei einem Projekt weiterhelfen? Kommentare sind wie immer sehr willkommen 🙂

Veröffentlicht von

Bernhard ist fest angestellter Webentwickler, entwickelt in seiner Freizeit Plugins, schreibt in seinem Blog über WordPress und andere Themen, treibt sich gerne bei den WP Meetups in Berlin und Potsdam herum und läuft nach Feierabend den ein oder anderen Halbmarathon.

17 Kommentare » Schreibe einen Kommentar

  1. Hallo Bernhard,

    Wie würdest du das Problem mit GPX Dateien lösen.

    In der Mediathek wir beim versuch GPX Dateien hochzuladen folgendes angezeigt: Aus Sicherheitsgründen ist dieser Dateityp nicht erlaubt.

    Bei meinem Wanderblog möchte ich den Lesern die GPX Datei anbieten damit sie die Wanderbeschreibung nach wandern können.

    Hier findest du eine gelungene Seite die GPX Dateien zum download bereit stellt.
    wandern-im-odenwald.kruemelhuepfer.de/wanderungen/vorderer-odenwald-bergstrasse/spatschlucht-schanzenkoepfle-hirschburg/

    Gruß Jürgen

    • Hallo Jürgen,

      das von dir angesprochene Problem ist ein anderes. Aber es lässt sich auch sehr leicht lösen. Zu dem Thema hatte ich ebenfalls mal einen Beitrag geschrieben: Den Upload von SVG-Dateien erlauben.

      Vermutlich musst du als Typ application/gpx+xml angeben (Zeile 2), damit es klappt. Ansonsten solltest du den Code so übernehmen können.

  3. Hallo Bernhard,

    vielen Dank für Deine Mühe.
    Ich habe das Plugin installiert und aktiviert. Leider gibt es in der Mediathek immer noch die gleiche Meldung.

    „Castillo.gpx“ konnte nicht hochgeladen werden.
    Aus Sicherheitsgründen ist dieser Dateityp nicht erlaubt.

    Es gibt wohl noch einen anderen Fehler. Kannst Du meinen Blog auf Fehler überprüfen oder kennst Du jemanden der solche Arbeiten durchführt.

    Gruß Jürgen

    • Hm, das ist wirklich merkwürdig. Ich hatte es bei mir lokal getestet und konnte beide Dateitypen hochladen.

      Von außen kann ich aber auch nicht wirklich sagen, was bei deinem Server vielleicht anders konfiguriert ist und wieso es zu diesem Fehler kommt.

      Ich könnte dir höchsten noch empfehlen, es mal mit einem anderen Browser zu versuchen. Ich hatte für die Tests den aktuellen Chrome Browser verwendet.

      • Hallo Bernhard,

        vielen Dank für Deine Mühe.
        Ich benutze auch den Chrome Browser. Mit dem Opera Browser funktioniert es auch nicht.

        Gruß Jürgen

      • Interessant. Mir war der Fehler eben selbst nie aufgefallen. Es scheint eine Konstante zu geben, die man in der wp-config.php setzen kann:

        define( 'ALLOW_UNFILTERED_UPLOADS', true );

        Aber ich kann nur davon abraten das zu tun, denn der Sicherheitsmechanismus ist da nicht umsonst 😉

  4. Hallo Bernhard,

    ein wirklich sehr schönes Feature, das du da beschreibst. Wirklich enttäuschend ist die eingeschränkte Umsetzung seitens der Browser. Wenn’s der IE nicht kann und am Mac keiner, dann sind wieder sooo viele Besucher «raus» (wie viele? ein Drittel?) … echt schade. Wir haben 2017, nicht 1997 ¯\_(ツ)_/¯

    • Dennoch kann man es ja anbieten. Wer also einen ordentlichen Browser nutzt, der profitiert davon. Und es betrifft ja nicht den Mac (Desktop), sondern lediglich iOS.

  5. Hallo Jürgen,

    ich lege die GPX Datei(en) in einen Ordner, zippe diesen und lade die ZIP-Datei problemlos hoch.
    Der Seitenbesucher klickt auf den Link „Dateien download“ oder wie immer du ihn nennen magst, und lädt den Zip-Ordner runter, entpackt und hat alle Daten.
    Hat sich noch nie einer Beschwerd oder den Weg nicht verstanden.
    Vielleicht eine Lösung
    Gruß
    Burkhard

    • Das Attribute sollte mit jedem Dateityp funktionieren. Ich kann daher nur vermuten dass vielleicht JavaScript Code in deinem Theme oder einem Plugin dazu führt, dass es nicht funktioniert.

  7. Hallo Bernhard,
    Ich möchte Besuchern der Website spezielle Themen herunterzuladen … nachdem sie sich verifiziert haben … (zb über ein login-Formular). Geht das ganze ohne php? Nur mit HTML, CSS und evtl. JavaScript ? Oder htaccess?
    Hast du nen Tipp?
    Ich bin blutiger Anfänger…
    Beste Grüße
    Stef

    • Hallo Stef,

      wenn du mit „ohne PHP“ meinst, dass du dazu nichts programmieren willst, dann würde ich dir fertige Plugins vorschlagen. Was du hier beschreibst, hört sich stark nach „Membership-Plugins“ an. Hier kann ich dir aber kein einzelnes Plugin empfehlen, dass du dafür nutzen kannst. Es gibt einfach zu viele davon und ich bin hier nicht mehr auf dem aktuellen Stand.

      Aber auch mit dem Download Manager Plugin kannst du so etwas umsetzen. In der kostenfreien Version z.B. abhängig von der Rolle (die du z.B. mit dem Members Plugin verwalten könntest). In der Pro-Version des Plugins kannst du noch weiter „Beschränkungen“ wählen.

      Ich hoffe das hilft dir als Idee erst einmal weiter.

Schreibe einen Kommentar

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