O'Reilly

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.

Track.js Error Reporting

Upcoming Events

Recent Features

  • Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today’s websites and devices become ever more varied, a plethora of responsive images...

  • 9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • Animated AJAX Record Deletion Using MooTools

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with MooTools JavaScript. The PHP - Content & Header The following snippet goes at the...

  • Create a Simple Dojo Accordion

    Let's be honest:  even though we all giggle about how cheap of a thrill JavaScript accordions have become on the web, they remain an effective, useful widget.  Lots of content, small amount of space.  Dojo's Dijit library provides an incredibly simply method by which you can...

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.

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

  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!

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

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

  27. I tried on windows chrome. It defaults to the file name not the attribute. Mac is fine.

  28. Ankur Manchanda

    Is there any support for downloading large files ( >1 mb) files using HTML5.

  29. Prashant

    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?

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

Recently on David Walsh Blog

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...