Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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

View Demo

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.

View Demo

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.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

Incredible Demos

Discussion

  1. Chung Xa

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

  2. Edd Turtle

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

  3. Laidlaw

    Ditto what Edd said…

  4. David Walsh

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

  • Cesidio DiBenedetto

    I believe that this is currently only supported in Chrome.

  • psobko

    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 );
  • Jan-Marten de Boer

    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.

  • Sumeet Chawla

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

  • maettig

    You know there is a HTTP header to do this? http://www.php.net/manual/en/function.header.php#example-4133

  • Bence Erős

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

  • Allan Ebdrup

    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.

  • Guillaume

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

  • Fariz Fadian

    Thats good share!! :D Thanks

  • satish

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

  • Zahin Umar Alwa

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

  • Lewis Cowles

    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…

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

  • James Dinsdale

    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.

    • Dimitar

      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

  • Andrew Wooldridge

    Very 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

  • Fred

    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.

  • 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

    • David Walsh

      Fixed!

    • Cosmin

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

  • Cosmin

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

  • Kiash

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

  • Hernando Cadet

    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?

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

  • 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!

  • Paul

    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.

  • Darren Todd

    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.

  • john calder

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

  • Ankur Manchanda

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

  • 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?

  • pradeep

    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.

  • Tom

    This attribute is only honored for links to resources with the same-origin. – https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

    I got burned by this because my static assets are served from S3

  • Katie

    Thank you so much! This worked exactly as I needed. Very helpful!

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