File Downloads with the HTML5 Download Attribute

So...I was wrong. I had thought that file downloads like below were a feature of AngularJS.


<a href="https://www.google.com/images/srpr/logo11w.png" target="_blank" download="logo.png">Download</a>

This is not true, the Download Attribute is vanilla HTML and an awesome feature! We've all been in a situation where a client asks us to make that link automatically download a file. Now you can do that without having to write a bunch of JavaScript and fake an <iFrame> or even (GASP) use a Flash plugin to make it work. Well, not anymore!

As of this writing there are a few caveats. The Download Attribute does not work in Safari (iOS and OXS), Opera Mini or Internet Explorer. It is a feature in Edge 13 but not many users are there yet. I suggest adding target="_blank" to the link so that the file will open in a new window for those browsers that don't support the feature.

Need a full example? Check out the pen below.

See the Pen Download file AngularJS by Jeff Shamley (@jshamley) on CodePen.

Add new comment

Comments

It doesn't work with edge, it opens the link instead of downloading it.

Fake....

not working in SAFARI MAC,

just opens image in new tab.