As a website user, one would have come across links or buttons which say "Click to download" or "Download" on a website. Have you ever wondered how can you add one to your website?. Keep reading!!!.
As part of this blog let us see how one can create a download link or button which lets you download an asset (e.g. image, pdf, files, etc.). Do you know what is even more interesting?. This can be done with just a single line of HTML.
How to create a download link or button in HTML
The simple way to achieve this is
- create an anchor tag with the text of your choice e.g "Click to download"
- to the href attribute add the path to the URL of the asset you want to be downloaded. In the below example, I have added a path to an image.
- next comes the more important part, add the* *download **attribute to the anchor tag.
Yay!!! You have created your download link now.
How do I make this look like a button?.
Simply add some CSS to make the anchor tag look like a button.
<a href="https://blog.kritikapattalam.com/images/click-me.jpg" download>Click to download</a>
Save the file using a custom name
In the above-given example, when the user clicks on download, it will save the file as "click-me.jpg", since that is the file name specified in the href attribute.
What about if you want to give it a different name?.
Simply add the name as a value for the download attribute. For example in the below code, I have added download = test, hence when the user clicks on download the file will be saved as test.jpg
<a href="https://blog.kritikapattalam.com/images/click-me.jpg" download="test">Click to download</a>
Can the asset/href value be of a different domain?
NO, they cannot. Download attribute works only for files from the same Origin URL's (i.e the file should be hosted on the same origin as the site you are trying to implement it in) or blob or data URL files.
In the below example, href value is from twitter.com whereas my site is blog.kritikapattalam.com. In this case, the download button will not work.
<!--- Site origin - https://blog.kritikapattalam.com --->
<a href="https://twitter.com/images/click-me.jpg" download="test">Click to download</a>
Well, that is it for this blog, and by now you should know how to create a download on your website.
Follow me on Twitter | LinkedIn for more web development related tips and posts. Feedbacks and suggestions are welcome.
Are you more of a Twitter person?. Then check out the short version of this blog in the below thread.
💡 HTML - Code Snippet💡
Did you know that you can create a DOWNLOAD LINK , with just a single attribute on an anchor tag?.
Check this out.!!!
#webdevelopment #DEVCommunity #HTML #WomenWhoCode15:30 PM - 11 Jul 2021
Top comments (0)