Reputation: 21490
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?
Upvotes: 305
Views: 896302
Reputation: 1389
All images you have to download should be your own origin not a URL from other site.Browsers still does not supported cross origin downloads, it will always redirect you to the link.
Upvotes: 0
Reputation: 264
You can use in two ways
<a href="yourfilename" download>Download</a>
it will download file with original name In Old Browsers this option was not available
2nd
<a href="yourfilename" download="newfilename">Download</a>
Here You have option to rename your file and download with a different name
Upvotes: 4
Reputation: 558
If you host your file in AWS, this may work for you. The code is very easy to understand. Because the browser doesn't support same-origin download links, 1 way to solve it is to convert the image URL to a base64 URL. Then, you can download it normally.
var canvas = document.createElement("canvas")
var ctx = canvas.getContext('2d')
var img = new Image()
img.src = your_file_url + '?' + new Date().getTime();
img.setAttribute('crossOrigin', '')
var array = your_file_url.src.split("/")
var fileName = array[array.length - 1]
img.onload = function() {
canvas.width = img.naturalWidth
canvas.height = img.naturalHeight
ctx.drawImage(img,
0, 0, img.naturalWidth, img.naturalHeight,
0, 0, canvas.width, canvas.height)
var dataUrl = canvas.toDataURL("image/png", 1)
var a = document.createElement('a')
a.href = dataUrl
a.download = fileName
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
Upvotes: 0
Reputation: 449783
This answer is outdated. We now have the
download
attribute. (see also this link to MDN)
If by "the download link" you mean a link to a file to download, use
<a href="http://example.com/files/myfile.pdf" target="_blank">Download</a>
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.)
Upvotes: 189
Reputation: 151
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.
<a target="_blank" download="realname.mp3" href="realname.UNKNOWN">Download it</a>
<a target="_blank" href="realname.mp3">Play it</a>
I was hoping just throwing a dummy query on the end or otherwise obfuscating the extension would work, but sadly, it doesn't.
Upvotes: 2
Reputation: 6691
In modern browsers that support HTML5, the following is possible:
<a href="link/to/your/download/file" download>Download link</a>
You also can use this:
<a href="link/to/your/download/file" download="filename">Download link</a>
This will allow you to change the name of the file actually being downloaded.
Upvotes: 580
Reputation: 2835
i know i am late but this is what i got after 1 hour of search
<?php
$file = 'file.pdf';
if (! file) {
die('file not found'); //Or do something
} else {
if(isset($_GET['file'])){
// Set headers
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename=$file");
header("Content-Type: application/zip");
header("Content-Transfer-Encoding: binary");
// Read the file from disk
readfile($file); }
}
?>
and for downloadable link i did this
<a href="index.php?file=file.pdf">Download PDF</a>
Upvotes: -8
Reputation: 1001
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.
Upvotes: 0
Reputation: 93
This 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
<p><a href="images/logo2.png" download>test pdf</a></p>
Upvotes: 7
Reputation: 1357
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:
Content-Disposition: attachment; filename=ProposedFileName.txt;
This was the way to do before HTML5 (and still works with browsers supporting HTML5).
Upvotes: 27
Reputation: 81482
To link to the file, do the same as any other page link:
<a href="...">link text</a>
To force things to download even if they have an embedded plugin (Windows + QuickTime = ugh), you can use this in your htaccess / apache2.conf:
AddType application/octet-stream EXTENSION
Upvotes: 10
Reputation: 368
Like this
<a href="www.yoursite.com/theThingYouWantToDownload">Link name</a>
So a file name.jpg on a site example.com would look like this
<a href="www.example.com/name.jpg">Image</a>
Upvotes: -2
Reputation: 499352
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:
<a href="path to resource.name of file">Link</a>
<a href="files/installer.exe">Link to installer</a>
Upvotes: 11