HTML-Tipps für Webentwickler

Dokumente zum Download anbieten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
04:50
  Lesezeichen setzen

Transkript

Manchmal sind es gerade Kleinigkeiten, die ungeheuer praktisch sind. Das download-Attribut zählt dazu. Das Standardverhalten bei Klick auf einen Link ist, dass dadurch die angegeben Seite aufgerufen wird. Manchmal ist aber ein anderes Verhalten erwünscht. Man möchte ein Dokument oder eine andere Datei, wie beispielsweise ein Bild, zum Herunterladen anbieten. Und genau dafür gibt es das download-Attribut. Folgende Situation: Ich habe einen Link. Der verweist auf ein Bild. Das Bild lasse ich auch anzeigen. Sehen wir uns das Ganze einmal ohne Download an. Wenn ich auf dieses Bild klicke, dann wird das Bild geöffnet. Wir ergänzen das download-Attribut, hier ist einmal ohne einen Wert, "mit download". Und wenn ich dieses Dokument aufrufe und auf das Bild klicke, dann erscheint der Dialog, wo ich direkt dieses Dokument speichern kann. Der Name, der angezeigt wird, ist genau derselbe, der auch bei der Datei selbst angegeben ist. Ich kann aber auch einen anderen Namen bestimmen, indem ich diesen hinter "download" schreibe. Also ich nenne es einmal "mond.jpg", und wenn wir das aufrufen, drauf klicken, dann wird mir auch dieser Name vorgeschlagen. Einen anderen Namen anzugeben ist sehr praktisch. Angenommen, wir lassen ein Bild serverseitig generieren. Dann kann es sehr gut sein, dass das Bild einen eindeutigen, kryptischen Namen haben muss. Aber wir wollen dem Benutzer einen Namen bieten, mit dem er auch etwas anfangen kann. Dann können wir bei dem Bild selbst den echten Namen schreiben und bei dem download-Attribut den Namen, der dem Benutzer eben auch etwas sagt. Sehen wir uns dann an, wie dieses Feature in anderen Browsern implementiert wird. Ich bin gerade in Chrome. Wenn ich dadrauf klicke, dann wird es direkt geladen, und man sieht das hier unten, und da kann ich mir das dann anzeigen lassen in dem Ordner, wo das alles gespeichert wird. Schön umgesetzt ist es meines Erachtens auch im Edge. Wenn ich dadrauf klicke, dann werde ich gefragt: "Wie möchten Sie mit dem Dokument verfahren?" Dann können Sie verschiedene Optionen wählen und beispielsweise "Speichern" angeben. Allerdings wird dabei der ursprüngliche Name des Dokuments genommen, aber es gab hier die Option "Speichern unter" zu wählen. Und bei "Speichern unter" kann der Benutzer natürlich selbst einen Namen vorgeben. Im Beispiel ging es immer um ein Bild, was gespeichert werden soll. Man kann das natürlich ebenfalls bei anderen Datentypen wie PDF verwenden, Sehen wir uns das einmal an. Dann "ohne download" wird das Dokument direkt aufgerufen, und mit dem Attribut kann ich das hier speichern. Es gibt eine Einschränkung. Die Dateien müssen von derselben Domain stammen. Sehen wir uns das am Beispiel an. Ich rufe das Ganze über "localhost" auf und habe ein Dokument, was sich an einer anderen Adresse befindet, und dann hat dieses Download keine Auswirkung. Wenn wir dieses Dokument ansehen dann einmal "ohne download", das wird auf dem Server aufgerufen mit "Download", derselbe Effekt, weil das nicht funktioniert, wenn sich eben ein Dokument an anderer Stelle befindet. Wie sieht das mit der Browser-Unterstützung aus? Da sind wir relativ gut im grünen Bereich. In Safari wird das unterstützt, ab Safari ziehen eins. Das download-Attribut ist praktisch, wenn Sie Dokumente direkt zum Herunterladen anbieten können. Dafür schreiben Sie bei dem a-Element die Angabe "download", und als Wert können Sie den Namen angeben, unter dem das Dokument dann gespeichert werden soll.