The other day, I happend across an article titled, "5 HTML5 Features you need to know" by Adnane Belmadiaf. In that article Adnane mentions the "download" attribute of the HTML Anchor tag. I'd never heard of this feature before; but, apparently, the "download" attribute tells the browser to download the HREF location using the given filename instead of navigating the browser directly to the HREF location. This doesn't necessarily surface any new functionality from the user's perspective; but, it can create a nicer user experience (UX).
There's not really too much to this "download" attribute. You simply provide a filename as the attribute value. And then, when the user clicks on the anchor link, they will download the HREF location and save the resultant payload using the provided filename:
<a href="./generate-zip?id=4" download="assets.zip">Download</a>
In this case, the server-generated ZIP file will be saved to the user's computer as "assets.zip".
The "download" attribute has very good support, working in all the modern browsers (with the not-surprising exceptions of IE 11 and Mobile Safari). But, this feature can really be viewed as a "progressive enhancement" since, without it, the user would simply navigate to the given HREF location where the server could generate a response value and set the appropriate Content-Disposition for download behavior and filename. So really, the "download" attribute just gives you more control over how the user experiences this existing workflow.
NOTE: According to the Mozilla Developer Network (MDN), if the Content-Disposition header provides a different filename than one outlined in the "download" attribute, the Content-Disposition will take precedence.
The notable exception to this "progressive enhancement" perspective is when the HREF attribute points to a Data URI. While you used to be able to navigate a user to a Data URI, the Chrome browser is starting to block this form of navigation because of security concerns. However, it won't block a Data URI HREF if it is used in conjunction with a "download" attribute (allowing the user to download the Data URI content).
This Chrome exception for Data URIs got me thinking about fun ways in which I could experiment with the "download" attribute. And, having recently watched the Jimmy Fallon and Justin Timberlake "hashtag" skit (again), I thought it would be exciting to create an HTML Canvas-based "HashTag Meme" generator in which the user can download the canvas data using the "download" attribute. Not only would this let me play with the "download" feature, it would also give me a chance to play with Canvas, which I've never really done before.
In the following demo, the user can enter phrases into a textarea, one phrase per line. Those phrases are then turned into camel-case hash-tags that get rendered onto the canvas below a scene-still of the Jimmy Fallon skit. So, for example, if the user entered:
let's burn this beast to the ground
... the following content would be rendered onto the Canvas:
#FridayDeployments #Yolo #DailyGrind #LetsBurnThisBeastToTheGround
Then, once the Canvas is updated, the user can click the "Download Image" link, which will download the Cavnas raster image using a Data URI and a "download" attribute.
Since this post is about the HTML Anchor "download" attribute and not about the Canvas element, I'm not going to give any more explanation about what this demo is doing. I've tried to supply plenty of comments; but, for the most part, this was just a fun way to look at the "download" attribute:
As you can see, the "click" handler for the Download Image button grabs the Canvas Data URI and pushes it into the button's HREF attribute. The "download" attribute then saves the resultant PNG to the user's computer.
By default, the HashTag meme generator starts with the following phrases:
show me the cookie
getin my cookie on
i'm the real cookie monster
nom nom nom nom nom nom nom nom
So, if we run this page and then click the Download Image button without making any changes, we get the following image download:
Fun stuff! The "download" attribute seems like an nice way to provide a better user experience around file generation. And, in the case of Data URIs - perhaps the best way to provide any user experience at all.
Want to use code from this post? Check out the license.