HTML5 kam mit allen neuen APIs, neuen Eingabetypen und Attributen für Formulare. Wie es oft der Fall ist, verschleiern diese wichtigen Ergänzungen oft die kleineren Upgrades und ich denke, dass dies insbesondere für das Download-Attribut gilt.
Wie Sie wissen, gibt es einige Dateien, die der Browser nicht automatisch herunterlädt. Bilder, andere Webseiten und je nach Einstellungen in Ihrem Browser manchmal sogar PDFs. Das Download-Attribut gibt dem Browser eine native Möglichkeit, diese Dateien automatisch herunterzuladen, ohne auf JavaScript zurückgreifen zu müssen. Dies ist sehr nützlich für jede App, die sich mit dem Herunterladen von Bildern beschäftigt, wie zum Beispiel Bild-Upload-Sites.
Da das Download-Attribut keine Skripte jeglicher Art verwendet, können Sie das Attribut einfach zu Ihrem Link hinzufügen:
var a = document.createElement('a');if(typeof a.download != "undefined"){// download attribute is supported}else{// download attribute is not supported}Unter Berücksichtigung all dessen, was zu HTML5 hinzugefügt wurde, ist das Download-Attribut ein sehr kleiner Teil, aber meiner Meinung nach ist es ein Attribut, das überfällig war und definitiv in den heutigen Apps für Benutzerfreundlichkeit und Vereinfachung verwendet wird.
Hast du das Download-Attribut implementiert? Was sind deine unbesungenen Helden von HTML5? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Bild herunterladen über Shutterstock.
![]( myFolder / myImage.png "herunterladen> Bild herunterladen </a></pre></div><p> 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 ist ideal für Sites mit komplexen Dateinamen oder sogar für dynamisch erstellte Images, die einen einfachen und benutzerfreundlichen Dateinamen bereitstellen möchten. Um einen Namen anzugeben, fügen Sie einfach ein Gleichheitszeichen gefolgt von dem Namen, den Sie verwenden möchten, in Anführungszeichen ein, etwa so: </p><div class=pre-wrap><pre><code class=){kind=link}
![var a = document.createElement('a');if(typeof a.download != "undefined"){// download attribute is supported}else{// download attribute is not supported}]( myFolder / reallyUnncessaryLongAndComplicatedFileName.png "download =" myImage "> Bild herunterladen</a></pre></div><p> Beachten Sie, dass der Browser der heruntergeladenen Datei automatisch die richtige Dateierweiterung hinzufügt, sodass Sie diese nicht in Ihren Attributwert aufnehmen müssen. </p><p class=clearrow></p><h2> Browserunterstützung </h2><p> Momentan unterstützen nur Chrome 14+ und Firefox 20+ das Download-Attribut. Daher müssen Sie möglicherweise auf ein einfaches JavaScript zurückgreifen, um zu erkennen, ob das Attribut unterstützt wird. Du kannst das so machen: </p><div class=pre-wrap><pre><code class=){kind=link}