HTML5 Download Attribute Guide

Jul 9 2014 by Jacob Gube | 7 Comments

The download attribute allows us to force media file downloads onto the user’s computer or mobile device.

Example:

<a href="htmldoc.html" download>Download HTML document</a>

Typically, when we link to an HTML document, PDF, image file, or other media files, they will be opened in the browser when the user clicks on its link.

But if the hyperlink has the download attribute, such as in the example above, the browser is instead instructed to download the file, behaving much like a link pointing to a .zip or .exe file.

The download attribute will open a "save" dialog in Firefox, giving users the option to save the file to their computer or mobile deviceThe download attribute will open a "save" dialog in Firefox, giving users the option to save the file to their computer or mobile device

The download attribute is great for PDFs, image files, video and audio clips, and other media content that you would like users to save on their computer or mobile device.

Changing the Name of the File

You can change the actual file name by giving the download attribute a value.

Example:

<a href="tform5201.pdf" download="visa-application.pdf">

In the example above, when the user clicks on the hyperlink, the PDF file named "tform5201.pdf" is changed to a more readable and user-friendly file name "visa-application.pdf" when it’s downloaded.

Demo of the Download Attribute

Here is a demo page to help you explore and test the download attribute’s behavior on hyperlinks:

Screenshot of HTML5 download attribute demo page

View Demo

Download Source from GitHub

Download Attribute Feature Detection

Because a lot of browsers still don’t implement the download attribute, it’s a smart idea to use JavaScript to check if the user’s browser has it:

// create temporary hyperlink element
var hyperlink = document.createElement("a");

// if download property is undefined
// browser doesn't support the feature
if(hyperlink.download === undefined) {
  // do stuff
}

In the demo page, if the download attribute isn’t present in the browser, a modal window is displayed with a message telling the user the feature isn’t supported.

Safari doesn't currently support download attribute, so a modal window is displayed to inform the userSafari doesn’t currently support the download attribute, so a modal window is displayed to inform the user

Implementation Status

At the time of writing, the latest versions of the following web browsers implement the download attribute:

  • Firefox/Firefox for Android
  • Chrome/Chrome for Android
  • Opera/Opera Mobile
  • Android Browser
  • Blackberry Browser

Check out this download attribute support table at caniuse.com to see its present-day browser implementation status. Also, check out the W3C’s download attribute specifications.

View Repo on GitHub

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

7 Comments

Arokh

July 10th, 2014

Nice, but until IE uses it, we can’t use it :(

Andrew

July 10th, 2014

If you can control the server, you can set an HTTP response header that tells the browser to save a file. It’s been widely supported for about 15 years. Setting content type can help, too.

Content-Disposition: attachment; filename=”visa-form.pdf”

http://www.w3.org/Protocols/rfc2616/rfc2616-sec19.html#sec19.5.1

Davide De Maestri

July 10th, 2014

Wow, I didn’t know this simple but useful HTML5 feature! Thank you!

Tinny

July 11th, 2014

If you are linking documents, they are going to be downloaded with their original name, if browser doesn’t support download tag. No big deal.

Rav

July 11th, 2014

Didn’t know this til I read this article. Thanks for writing about it. I hope IE and Safari will both support this soon!

Jack

July 15th, 2014

Question – When changing the Name of the File, is it changing the name of the file on disk or not? Anyone know?

Thanks

Jacob Gube

July 16th, 2014

@Jack: When you assign a value to the download attribute, what it does is it automatically changes the file name suggestion in the Save File dialog window in the user’s machine. The user can still change the file name, you’re just making it convenient by already suggesting a good file name for them. Except in Chrome, where, by default, you’re not asked to name the file, it just downloads files automatically without a preliminary interface or confirmation window. Try the demo page in various browsers to see how it works: All the links point to the same file (called htmldoc.html) which is on our server.

Leave a Comment

Subscribe to the comments on this article.