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.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

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

  • How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • Adding Events to Adding Events in MooTools

    Note: This post has been updated. One of my huge web peeves is when an element has click events attached to it but the element doesn't sport the "pointer" cursor. I mean how the hell is the user supposed to know they can/should click on...

  • jQuery Comment Preview

    I released a MooTools comment preview script yesterday and got numerous requests for a jQuery version. Ask and you shall receive! I'll use the exact same CSS and HTML as yesterday. The XHTML The CSS The jQuery JavaScript On the keypress and blur events, we validate and...

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.

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

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...

  • New:  Webdesigner News!

    A new and exciting website has recently been launched for web designers and developers. You likely spend hours every morning browsing through hundreds of posts on your RSS feeds, hoping to stumble across relevant stories. Webdesigner News was built to provide web designers and developers with...