HTML5 download Attribute
I tend to get caught up on the JavaScript side of the HTML5 revolution, and can you blame me? HTML5 gives us awesome "big" stuff like WebSockets, Web Workers, History, Storage and little helpers like the Element classList collection. There are, however, smaller features in HTML5 that we can appreciate; one of those would be the new download attribute. The download attribute allows you to set a separate file download name than the actual link endpoint itself.
The HTML
Place the download attribute on a link...
<!-- will download as "expenses.pdf" --> <a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>
...and when the user clicks the link, the download attribute appears in the save dialog instead of the garbled mess that was there before. In this case, the file will be downloaded as expenses.pdf. The download attribute also triggers a force download, something that I used to do on the server side with PHP.
This attribute is extremely useful in cases where generated files are in use -- the file name on the server side needs to be incredibly unique, but the download attribute allows the file name to be meaningful to user. The download attribute is one of those enhancements that isn't incredibly sexy but is a practical and easy to add.
very useful! we don’t need to create a file download.php or st like that anymore : )
Daaamn that’s cool! Is there any browser support yet?
Ditto what Edd said…
At present, Chrome is the only browser to support this attribute. I look forward to more in the future though!
Sorry David for duplicating your response. At the time I responded, I did not see yours yet.
david, i donno what parts of HTML 5 were implemented by internet explorer, if you could post the features of HTML 5 that also supported by IE would be helpful i guess.
Looks like it will be coming to Firefox.
http://javascript-reverse.tumblr.com/post/37056936789/html5-download-attribute
I believe that this is currently only supported in Chrome.
Can’t believe I haven’t heard about this yet. Hmm, so using jQuery you’d be able to dynamically change the name of the file?
You can use javascript directly by using setAttribute:
I still suggest both setting a proper content disposition server side, as well as a proper filename. When people link to it directly or copy the URL location to send it by mail, the same behaviour can be maintained, as well as that it has browser support across the board.
ooo.. that’s pretty cool.. I had no idea about this..
You know there is a HTTP header to do this? http://www.php.net/manual/en/function.header.php#example-4133
+1 for Maettig, the HTTP Content-Disposition header does the same. I can just hardly find a use-case where the download attribute is useful.
I actually use this in http://obsurvey.com, together with a data: URL to generate a csv file in clientside JavaScript that is saved when you click a link.
Unfortunately the data: URL and download property only works as intended in Chrome.
For other browsers i rely on downloadify, that uses flash to accomplish the same:
https://github.com/dcneiner/Downloadify
Thank you! Since a[download] is only supported in Chrome ( and only the desktop, not the mobile ) I was needing this alternative.
Hey David, thanks for showing us that quick new feature, i am going to use it right away.
Thats good share!! :D Thanks
Very informative :) all the post you have in your blog i have visited this blog a long along ago…
but now i am feeling guilty that how i can forgot such awesome blog link….
Thanks David I am fan of your every post..
Great Article, the fact that all your articles are just so easy to read and understand makes you one awesome writer, David.. Will love to get some “Web Guru Gyan” from you.. Do you have any plans to visit India any time sooner.. :-)
Cheers Man, keep writing these awesome articles..!!
Signature tool I made in less than 3 minutes, using this, canvas and jsFiddle… http://jsfiddle.net/LewisCowles1986/QPv34/
Great info, I just thought I would share another use for this…
Nice demo! Played around with it — http://jsfiddle.net/drzaus/96huJ/10/
” I can just hardly find a use-case where the download attribute is useful.”
The filename is in a database but you don’t want the overhead of an additional query when someone wants to download the file.
Quote: ”I can just hardly find a use-case where the download attribute is useful.”
I can think of one.
User visits dodgy website. Dodgy website contains a button saying “Click here to see a pretty picture”. HREF on the link points to cat.jpg which is actually virus.exe but has been renamed to hide it from the URL tooltip that pops up on hover. User clicks on button, and the download attribute downloads virus.exe with the proper name onto the user’s PC.
I’ve only just found out about this, but it is open to abuse, and quite easily too.
This comment is wrong in two ways. First, the file would be cat.jpg on the user’s computer and they would have to rename it to a .exe in order to run it. Second, hovering over it still points to the download location so you would still see virus.exe.
er, no, you are missing the point. Clicking on the link will result in a prompt to save as
rooney.exe– whereas the mouseover shows it as.jpgVery handy to use this along with this technique to generate a file:
http://stackoverflow.com/questions/2897619/using-html5-javascript-to-generate-and-save-a-file
Firefox Nightly supports it (I just tried), but you have to actually write “important.txt” and not just “important”, if you want the file extension to show up correctly.
It works on my Firefox (latest, but not nightly) too.
Note your first demo has an error… it says it will download as “important.txt” but the download attribute is set to “important” so it works, but the extension isn’t actually specified (and should the browser not be able to properly detect the mimetype)… you may serve up a file the user can’t figure out how to use.
Cool though, can’t wait until 2025 when IE supports it! :-P
Fixed!
The extenstion currently needs to be specified only for Firefox. Chrome gets along fine, it doesn’t need it.
The extenstion currently needs to be specified only for Firefox. Chrome gets along fine, it doesn’t need it.
It is also possible by using PHP header function. HTML5 gives another plus point….
David your website has changed ever since I came here and you saved my job, we are still using you code. Hey I need to know how to package an app and have it ready for download, can any one help me do that?
Very nice, but it doesnt work in emails, for example i wanted to use it in a link that is sent by email, but the problem is when i click in the link it opens a new page.
Hey, my namesake, you really saved my life!. I´ve spent several hours trying to set filenames using http headers, url modifications and stuff.
Thanks, keep up good work!
This is very handy, great write-up!
One small caveat to note is that it doesn’t seem to work when the file being downloaded is not from the same page as the site being viewed (file from CDN/different sub-domain). In these cases, Chrome (v40, haven’t tried Firefox) will ignore the download attribute and fall back to using the filename from the href.
This was very helpful. The only other reference I could find for it was a rather complicated bit of PHP that required server-side manipulation. I’m glad to find the answer was much simpler.
I tried on windows chrome. It defaults to the file name not the attribute. Mac is fine.
Is there any support for downloading large files ( >1 mb) files using HTML5.
I tried it with zip file it fails in Firefox 39. From my php file i created a dir listing. In crome it works fine. Can any body tell what was the issue?
This was very helpful. but, Currently, only Chrome 14+ and Firefox 20+ support the download attribute, so you need to use simple JavaScript to detect if the attribute is supported.
– https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
I got burned by this because my static assets are served from S3
Thank you so much! This worked exactly as I needed. Very helpful!