Treehouse

HTML5 download Attribute

By on  

I tend to get caught up on the JavaScript side of the HTML5 revolution, and can you blame me?  HTML5 gaves 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.

ydkjs-6.png

Recent Features

Incredible Demos

  • Image Reflection with jQuery and&nbsp;MooTools

    One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, "masthead" images is a classy enhancement....

  • New York Times-Style Text Selection Widget Using MooTools or&nbsp;jQuery

    Aaron Newton made a great request to me last week: why not make my MooTools Documentation Bookmarklet function more like the New York Time's text selection widget. NYT's text selection widget listens for text selection and presents...

  • CSS&nbsp;Triangles

    I was recently redesigning my website and wanted to create tooltips.  Making that was easy but I also wanted my tooltips to feature the a triangular pointer.  I'm a disaster when it comes to images and the prospect of...

Discussion

  1. Chung Xa

    very useful! we don’t need to create a file download.php or st like that anymore : )

  2. Daaamn that’s cool! Is there any browser support yet?

  3. Laidlaw

    Ditto what Edd said…

  4. At present, Chrome is the only browser to support this attribute. I look forward to more in the future though!

  5. Cesidio DiBenedetto

    I believe that this is currently only supported in Chrome.

  6. 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?

    • Cesidio DiBenedetto

      You can use javascript directly by using setAttribute:

      element.setAttribute( ‘download’, whatever_string_you_want );

  7. 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.

  8. ooo.. that’s pretty cool.. I had no idea about this..

  9. +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.

  10. 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

    • qgustavor

      Thank you! Since a[download] is only supported in Chrome ( and only the desktop, not the mobile ) I was needing this alternative.

  11. Hey David, thanks for showing us that quick new feature, i am going to use it right away.

  12. Thats good share!! :D Thanks

  13. 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..

  14. 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..!!

  15. 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…

  16. Cochise Ruhulessin

    ” 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.

  17. 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.

    • James' Disappointed Father

      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.

  18. 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.

  19. Stephen

    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

    • The extenstion currently needs to be specified only for Firefox. Chrome gets along fine, it doesn’t need it.

  20. The extenstion currently needs to be specified only for Firefox. Chrome gets along fine, it doesn’t need it.

  21. It is also possible by using PHP header function. HTML5 gives another plus point….

  22. 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?

  23. Mauro

    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.

  24. David Fuentes

    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!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Use Code Editor