So verwenden Sie das Download-Attribut

HTML5 kam mit völlig neuen APIs, neuen Eingabetypen und Attributen für Formulare. Wie so oft verdecken diese großen Ergänzungen oft die kleineren Upgrades, und ich denke, dass dies insbesondere auf das Download-Attribut zutrifft.

Wie Sie wissen, lädt der Browser einige Dateien nicht automatisch herunter. Bilder, andere Webseiten und je nach Einstellungen in Ihrem Browser manchmal auch PDFs. Das Download-Attribut bietet dem Browser eine native Möglichkeit, diese Dateien automatisch herunterzuladen, ohne auf JavaScript zurückgreifen zu müssen. Dies ist wirklich nützlich für jede App, die sich mit dem Herunterladen von Bildern befasst, z. B. Bild-Upload-Sites.

Verwendung des Download-Attributs

Da das Download-Attribut keinerlei Skripte verwendet, ist es so einfach, das Attribut zu Ihrem Link hinzuzufügen:

Bild herunterladen

Das Tolle an diesem Attribut ist, dass Sie sogar einen Namen für die herunterladbare Datei festlegen können, auch wenn es sich nicht um den Namen auf Ihrem Server handelt. Dies eignet sich hervorragend für Websites mit komplexen Dateinamen oder sogar dynamisch erstellten Bildern, die einen einfachen und benutzerfreundlichen Dateinamen bereitstellen möchten. Um einen Namen anzugeben, fügen Sie einfach ein Gleichheitszeichen hinzu, gefolgt von dem Namen, den Sie verwenden möchten, in Anführungszeichen, etwa so:

Bild herunterladen

Beachten Sie, dass der Browser der heruntergeladenen Datei automatisch die richtige Dateierweiterung hinzufügt, sodass Sie diese nicht in Ihren Attributwert aufnehmen müssen.

Browserunterstützung

Derzeit unterstützen nur Chrome 14+ und Firefox 20+ das Download-Attribut, daher müssen Sie möglicherweise auf einfaches JavaScript zurückgreifen, um festzustellen, ob das Attribut unterstützt wird. Sie können dies folgendermaßen tun:

Lesen:  TikTok: So erkennen Sie, ob Sie im Schatten gesperrt sind

var a = document.createElement(‘a’);

if(typeof a.download != “undefiniert”)
{
// Download-Attribut wird unterstützt
}
anders
{
// Download-Attribut wird nicht unterstützt
}

Abschluss

Wenn man alles berücksichtigt, was zu HTML5 hinzugefügt wurde, ist das Download-Attribut ein sehr kleiner Teil, aber meiner Meinung nach ist es ein Attribut, das längst überfällig war und in heutigen Apps definitiv seinen Nutzen hat, sowohl hinsichtlich der Benutzerfreundlichkeit als auch der Vereinfachung.

Haben Sie das Download-Attribut implementiert? Was sind Ihre unbesungenen Helden von HTML5? Lass es uns in den Kommentaren wissen.

Ausgewähltes Bild/Miniaturansicht, Bild herunterladen über Shutterstock.

Aktuelle Artikel:

Empfohlen