It's interesting how some things come full circle. In the early days of the Web, browsers would automatically download links to files that weren't a web page, like images, PDF files, and documents. Then, browsers became so advanced that they were able to open nearly any file in real-time. That created a problem for developers, though. How would you force a browser to download a file, instead of opening it? A bunch of hacks and workarounds sprung up to solve the issue, but none were a true solution. That all changed with HTML5 when the Download Attribute was introduced.
Now, developers can add a special download attribute to their HTML anchor tags to tell browsers to treat a link as a download, rather than opening the target file. There are a few different ways that you can use the Download Attribute to control the way browsers handle your download links. Even better, all modern browsers support the Download Attribute, so you shouldn't see any issues with compatibility or the need for a fallback.
There are a few different ways that you can handle the Download Attribute. Each has its own benefit, and they all work smoothly across different browsers.
The Plain Download Attribute
The simplest way to use the Download Attribute is to just include it in its most basic form in your anchor tags. You don't need to include an additional file name or any supporting information. The result looks like this:
By including 'download' you're telling any browser reading the page to download the target link instead of opening it. In this instance, the browser will download the file exactly as it is with the same name.
This page shows how to make HTML button links with onclick and href using the tag and styling them using CSS into different colors and sizes. One of the easiest ways to make HTML button links is to create a HTML which will automatically generate the button.
Changing the File Name
What happens if you actually want to change the name. There are plenty of occasions where you'd want to do this. Automatically generated file names are a good example. They usually have ridiculously long names with strings of garbage characters. That's not the experience you want for your visitors. You can standardize things with the Download Attribute.
To specify a file name, set the download attribute equal to it. Exclude the file extension. The browser can't and won't convert the file type, so there's no sense in trying.
Your visitors will download the file as your-file.pdf.
Downloading an Image
Along with this comes a simplified way to let your users download images directly. This isn't revolutionary, and you can probably piece it together yourself, but you can use the download attribute to create a downloadable image link.
Start by setting up an image like you normally would on your page. This, of course, will be the image that's available for download.
Then, encapsulate the whole thing in an anchor tag, linking to the image path.
Finally, add in the download attribute to your anchor tag. You can change the name of your image if you like.
Now, when a visitor clicks the image, they'll automatically download it directly from your server. It's not necessary, and it might seem like overkill to a developer, but how many site visitors would think to right-click on an image to view or download it?
I have a basic idea of HTML. I want to create the download link in my sample website, but I don't have idea of how to create it. How do I make a link to download a file rather than visit it?
Tot Zam12 Answers
This answer is outdated. We now have the download attribute as described here.
If by 'the download link' you mean a link to a file to download, use
the target=_blank will make a new browser window appear before the download starts. That window will usually be closed when the browser discovers that the resource is a file download.
Note that file types known to the browser (e.g. JPG or GIF images) will usually be opened within the browser.
You can try sending the right headers to force a download like outlined e.g. here. (server side scripting or access to the server settings is required for that.)
In modern browsers that support HTML5, the following is possible:
You also can use this:
This will allow you to change the name of the file actually being downloaded.
Felix G.Felix G.In addition (or in replacement) to the HTML5's <a download attribute already mentioned,
the browser's download to disk behavior can also be triggered by the following http response header:
This was the way to do before HTML5 (and still works with browsers supporting HTML5).
A download link would be a link to the resource you want to download. It is constructed in the same way that any other link would be:
OdedOdedTo link to the file, do the same as any other page link:
To force things to download even if they have an embedded plugin (Windows + QuickTime = ugh), you can use this in your htaccess / apache2.conf:
Delan AzabaniDelan AzabaniThis thread is probably ancient by now, but this works in html5 for my local file.
For pdfs:
<p><a href='file:///........example.pdf' download target='_blank'>test pdf</a></p>
This should open the pdf in a new windows and allow you to download it (in firefox at least). For any other file, just make it the filename. For images and music, you'd want to store them in the same directory as your site though. So it'd be like
The download attribute doesn't work in IE, it ignores the 'download' completely. The download doesn't work on Firefox if the href points to a remote site. So Odin's example doesn't work on Firefox 41.0.2.
The download attribute is new for the <a> tag in HTML5
<a href='http://www.odin.com/form.pdf' download>Download Form</a>
or <a href='http://www.odin.com/form.pdf' download='Form'>Download Form</a>
I prefer the first one it is preferable in respect to any extension.
You can download in the various way you can follow my way. Though files may not download due to 'allow-popups' permission is not set but in your environment, this will work perfectly
another one this one will also fail due to 'X-Frame-Options' to 'sameorigin'.
There's one more subtlety that can help here.
I want to have links that both allow in-browser playing and display as well as one for purely downloading. The new download attribute is fine, but doesn't work all the time because the browser's compulsion to play the or display the file is still very strong.
BUT.. this is based on examining the extension on the URL's filename!You don't want to fiddle with the server's extension mapping because you want to deliver the same file two different ways. So for the download, you can fool it by softlinking the file to a name that is opaque to this extension mapping, pointing to it, and then using download's rename feature to fix the name.
I was hoping just throwing a dummy query on the end or otherwise obfuscating the extension would work, but sadly, it doesn't.
Like this
So a file name.jpg on a site example.com would look like this
i know i am late but this is what i got after 1 hour of search
and for downloadable link i did this
SikanderSikanderprotected by Community♦Jul 13 '16 at 10:33
Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?