The HTML5 download attribute

Years ago I showed you how to force a file to download with PHP. Now with HTML5, you [almost] don't have to do that anymore.

The HTML5 download attribute is intended to tell the browser that a certain link should force a certain file to download, optionally with a certain name that might be different than that on the server. Here's what it looks like:

<a href="/path/to/file.txt" download="any-name-you-want.txt">Download</a>

This will tell your browser to download file.txt and prefill the name to any-name-you-want.txt. No fancy server-side code required. As Mozilla notes, you can also use this technique with data URLs.

Now, of course, the caveat. Internet Explorer and [surprisingly] Safari don't support it yet, and creating a universal polyfill isn't really possible. (Although you could probably use a combination of feature detection and a proxy server to force the download, but that's really more effort than it's worth.)

Author avatar

About the author

Creator of Surreal CMS and other web things. Follow me for tweets about JavaScript, CSS, and web programming.