HTML5 werd geleverd met alle nieuwe API's, nieuwe invoertypen en kenmerken voor formulieren. Zoals vaak het geval is, verdoezelen die belangrijke toevoegingen vaak de kleine upgrades en ik denk dat dit met name geldt voor het downloadattribuut.
Zoals u weet, zijn er enkele bestanden die de browser niet automatisch downloadt; afbeeldingen, andere webpagina's en afhankelijk van de instellingen in uw browser, soms zelfs pdf's. Het downloadkenmerk geeft de browser een native manier om deze bestanden automatisch te downloaden, zonder terug te vallen op JavaScript. Dit is echt handig voor elke app die zich bezighoudt met het downloaden van afbeeldingen, zoals sites voor het uploaden van afbeeldingen.
Omdat het downloadkenmerk geen scripts van welke aard dan ook gebruikt, is het net zo eenvoudig als het attribuut aan uw link toevoegen:
var a = document.createElement('a');if(typeof a.download != "undefined"){// download attribute is supported}else{// download attribute is not supported}Uitgelichte afbeelding / thumbnail, afbeelding downloaden via Shutterstock.
![]( myFolder / myImage.png "download> Afbeelding downloaden </a></pre></div><p> Het leuke aan dit kenmerk is dat je zelfs een naam kunt instellen voor het downloadbare bestand, zelfs als dit niet de naam op je server is. Dit is geweldig voor sites met complexe bestandsnamen of zelfs dynamisch gemaakte afbeeldingen die een eenvoudige en gebruiksvriendelijke bestandsnaam willen bieden. Als u een naam wilt opgeven, voegt u gewoon een gelijkteken toe, gevolgd door de naam die u tussen aanhalingstekens wilt gebruiken, zoals: </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 "> Download afbeelding</a></pre></div><p> Merk op dat de browser automatisch de juiste bestandsextensie aan het gedownloade bestand zal toevoegen, dus u hoeft dat niet in uw attribuutwaarde op te nemen. </p><p class=clearrow></p><h2> Browserondersteuning </h2><p> Momenteel ondersteunen alleen Chrome 14+ en Firefox 20+ het downloadkenmerk, dus u moet mogelijk terugvallen op een aantal eenvoudige JavaScript-code om te detecteren of het kenmerk wordt ondersteund. Je kunt dit als volgt doen: </p><div class=pre-wrap><pre><code class=){kind=link}