How to use HTML5 Download Attribute
HTML5 came with various new features like new attributes for forms, new input
types as well as new API. One of the upgrade that came with HTML5 is the
Download attribute.
As we know, there are many files that are not downloaded directly. For example:
images, WebPages, PDF files, music files, etc. We have to right click on images
and then click on Save Image to save an image file. But if I want to download an
image file directly, then we have to use the download attribute.
Before going to Start, I will show you How to check Browser Support for this
attribute.
For checking Browser support we have to use JavaScript:
var
a = document.createElement('a');
if
(typeof a.download !=
"undefined") {
document.write('Download
attribute supported');
}
else
{
document.write('Download
attribute not supported');
}
If your Browser support it, It gives “Download attribute supported” message
otherwise if gives “Download attribute not supported” message.
Using Download Attribute:
<a
href="Image.jpeg"
download>Download
image</a>
Simply type download in the <a> anchor tag. By using this, when we click on
download image, the image starts downloading. The same method is used for
downloading PDF, webpage files (HTML), etc. (I am attaching a file in which I
have shown a comparison between using the download attribute and not using it.)
If we want to rename the name of file that we are going to download irrespective
of whatever be the name of file present in server then we have to write:
<a
href="Folder/myimagehavenoname.png"
download="myImage">Download
image</a>
Here, we write download="myImage". When we click on Download image, then an
image file is downloaded with name myImage with a .png extension. The browser
automatically detects the correct file extension and adds it to the downloaded
file. So there is no need to add the file extension in the download attribute.
Chrome 14+ and Firefox 20+ supports the download attribute. I have tried and
tested it in Chrome.
I am including a .zip file for downloading in which I am showing use of download
attribute as well as for checking Browser Support.