Creating a download link is usually an easy task. All we need to do is use an anchor tag
<a>, and add the reference URL pointing to the file. But some file types pose a technical problem – PDF, image and text files will open in the browser instead of being downloaded when a user clicks on the relevant link(s).
In the past, complicated setups and hacks on the server side were required to download these files (PDF, image, text, etc) by force. For that reason, HTML5 has a new attribute called
download, which is much easier to implement.
Recommended Reading: A Look Into: HTML5 <Article> And <Section> Elements
Using Download Attribute
download attribute does two things: download a file by force, and rename the file with the name specified in the attribute upon downloading.
For example, we have here a PDF and an Image file that are named randomly.
<a href="file/e4ptK9qd7bGT24e.pdf">Download PDF</a> <a href="file/KU7Ba93M7t7ghbi.jpg">Download Image</a>
So, without the
download attribute, these two files will open in the browser.
But when we add the
download attribute like so:
<a href="file/e4ptK9qd7bGT24e.pdf" download="10 Things You Should Know About Passion.pdf">Download PDF</a> <a href="file/KU7Ba93M7t7ghbi.jpg" download="wii.jpg">Download Image</a>
The files will be downloaded and renamed, as shown in the following screenshot.
We have created a demo page for you to see this attribute in action.
HTML5 has introdued some new elements and attributes that make life easier for web developers. This
download attribute is indeed a very handy addition. Unfortunately, the browsers are slow to catch up – it’s currently only supported on Firefox 20+, Chrome 14.0 and Opera 15.0.