How to use the download attribute
HTML5 came with all new APIs, new input types and attributes for forms. As is often the case, those major additions often obscure the minor upgrades and I think that this is particularly true of the download attribute.
Using the download attribute
Since the download attribute doesn’t use scripts of any kind, it’s as simple as adding the attribute to your link:
<a href="myFolder/myImage.png" download>Download image</a>
What’s great about this attribute is that you can even set a name for the downloadable file, even when it’s not the name on your server. This is great for sites with complex file names, or even dynamically created images, that want to provide a simple and user-friendly file name. To provide a name, you just add an equals sign, followed by the name you want to use surrounded in quotes, like so:
<a href="myFolder/reallyUnnecessarilyLongAndComplicatedFileName.png" download="myImage">Download image</a>
Note that the browser will automatically add the correct file extension to the downloaded file, so you don’t need to include that inside your attribute value.
var a = document.createElement('a');
if(typeof a.download != "undefined")
// download attribute is supported
// download attribute is not supported
Taking into consideration everything that has been added to HTML5, the download attribute is a very small part, but in my opinion it’s an attribute that was long overdue, and definitely has its uses in today’s apps for both usability and simplification.
Have you implemented the download attribute? What are your unsung heroes of HTML5? Let us know in the comments.
Featured image/thumbnail, download image via Shutterstock.