HTML5 kom med alla nya API, nya inmatningstyper och attribut för formulär. Som det är fallet, döljer de stora tilläggen ofta de mindre uppgraderingarna och jag tycker att det här är särskilt sant om nedladdningshandlingen.
Som ni vet finns det några filer som webbläsaren inte laddar ner automatiskt. bilder, andra webbsidor och beroende på inställningarna i din webbläsare, ibland även PDF-filer. Hämtningsattributet ger webbläsaren ett inbyggt sätt att ladda ner dessa filer automatiskt, utan att behöva komma tillbaka på JavaScript. Det här är verkligen användbart för alla appar som hanterar nedladdning av bilder, till exempel bilduppladdningswebbplatser.
Eftersom nedladdningsattributet inte använder skript av något slag är det lika enkelt att lägga till attributet till din länk:
var a = document.createElement('a');if(typeof a.download != "undefined"){// download attribute is supported}else{// download attribute is not supported}Med tanke på allt som har lagts till i HTML5 är nedladdningsattributet en mycket liten del, men enligt min mening är det ett attribut som var länge för sent, och har definitivt användningen i dagens apps för både användbarhet och förenkling.
Har du implementerat nedladdningsattributet? Vilka är dina oungliga hjältar av HTML5? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild, ladda ner bild via Shutterstock.
![]( myFolder / myImage.png "ladda ner> Ladda ner bild </a></pre></div><p> Vad som är bra med det här attributet är att du även kan ange ett namn för den nedladdningsbara filen, även när det inte är namnet på din server. Det här är bra för webbplatser med komplexa filnamn, eller till och med dynamiskt skapade bilder, som vill ge ett enkelt och användarvänligt filnamn. För att ge ett namn, lägger du bara till ett lika tecken, följt av det namn du vill använda omgivet i citat, så här: </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 / reallyUnnecessarilyLongAndComplicatedFileName.png "download =" myImage "> Ladda ner bild</a></pre></div><p> Observera att webbläsaren automatiskt lägger till rätt filtillägg till den nedladdade filen, så att du inte behöver inkludera det i ditt attributvärde. </p><p class=clearrow></p><h2> Webbläsarstöd </h2><p> För närvarande stöder bara Chrome 14+ och Firefox 20+ nedladdningsattributet, så det kan hända att du behöver komma tillbaka på några enkla JavaScript för att upptäcka om attributet stöds. Du kan göra så här: </p><div class=pre-wrap><pre><code class=){kind=link}