“Right click and save as” needs to go away

For a long time it has been standard practice to ask visitors to “right click and save as” when downloading a file that the browser itself is capable of rendering, but where doing so is not desirable. One reason for doing this is to spare people from the annoying experience of accidentally clicking a link to a 25 MB PDF, which subsequently launches a browser plugin that of course crashes while trying to download and display the file.

From a UX perspective though, adding instructions on how to click a link is not optimal, and feels like a hack. Not to mention that lots of people are literally afraid of the right mouse button. My mother is anyway.

Luckily there’s a correct way of doing this now, though it hasn’t seen widespread adoption yet:

The HTML5 download attribute

You use it like this:

<a href="hugemothereffinpdf.pdf" download>Download file</a>

Any file the browser would normally try to display natively or through a plugin can be forced to download using this attribute.

You can also give the attribute a value, like this:

download="filename"

This is useful if you’re serving up a dynamically generated file with a horrific filename like 9fd-f32ff322.pdf.

<a href="9fd-f32ff322.pdf" download="invoice">Download file</a>

The file will be saved as invoice.pdf.

Support

The download attribute is supported in Chrome 14+ and Firefox 20+. You can easily test for support like this:

if('download' in document.createElement('a')) //supported

Firefox quirk

When specifying a value for the attribute, Firefox will not automatically give the file the correct file extension like Chrome does. For this reason you should specify the extension explicitly. Chrome does not suffer from doing this.

download="filename.txt"

Old IE

For IE9 and older you can provide a fallback of sorts with a conditional comment:

<!--[if IE]><p>Right click and save as.</p><![endif]-->

Server-side solutions

There are or course other ways of forcing file downloads, such as adding certain configuration to your .htaccess file, but I think server-side solutions to front-end problems should be avoided whenever possible.

Discuss on Hacker News or reddit.