up vote 205 down vote favorite
57

This is crazy but I don't know how to do this, and because of how common the words are, it's hard to find what I need on search engines. I'm thinking this should be an easy one to answer.

I want a simple file download, that would do the same as this:

<a href="file.doc">Download!</a>

But I want to use an HTML button, e.g. either of these:

<input type="button" value="Download!">
<button>Download!</button>

Likewise, is it possible to trigger a simple download via Javascript?

$("#fileRequest").click(function(){ /* code to download? */ });

I'm definitely not looking for a way to create an anchor that looks like a button, use any back-end scripts, or mess with server headers or mime types.

share|improve this question
9  
It's wrong because the bible says it's a sin. ;) And because I simply want to use an HTML button, and I'm not afraid of learning something new. – brentonstrine Jul 23 '12 at 21:25
3  
Is the downvote because I didn't want to use the <a> tag? – brentonstrine Jul 30 '12 at 19:10
6  
Thanks to you "how to trigger a file download in javascript" would give answers much faster for any future searcher. – Danubian Sailor Mar 6 '14 at 17:07

12 Answers 12

up vote 164 down vote accepted

For the button you can do

<form method="get" action="file.doc">
<button type="submit">Download!</button>
</form>
share|improve this answer
    
The obvious and right answer, thanks. I don't know why I didn't think to do that. (Minus the Javascript part of the question, which Matt Ball answered.) – brentonstrine Jul 23 '12 at 21:41
3  
You could always wrap the in an anchor: <a href="file.doc"><button>Download!</button></a> Above is not valid HTML5 Can I nest a <button> element inside an <a> using HTML5? Or do it like @CFreak said. Docs about button tag: w3schools.com/html5/tag_button.asp – Scone Apr 16 '13 at 2:22
1  
Is that code all you need? Because it's not working for me. – user124384 Jul 24 '15 at 3:03
4  
doesn't work as a trigger, just redirect to the url as 'a' tag. – fdrv Apr 5 '16 at 15:02
2  
@kscius even today the download attribute is not supported in IE 11 (it is now supported in Edge) and it is not supported in Safari. In 2012 when the answer was originally posted it wasn't supported in any major browser. – Cfreak Jul 7 '16 at 3:40
up vote 234 down vote

I have done some research and found the best answer. You can trigger a download by using the new HTML5 download attribute.

<a href="path_to_file" download="proposed_file_name">Download</a>

Where :

  • path_to_file is either an absolute or relative path,
  • proposed_file_name the filename to save to (can be blank, then defaults to the actual filename).

Hope this is helpful.

Whatwg Documentation

Caniuse

share|improve this answer
11  
Not Work With Safari and certain IE versions – Mohamed Hussain Jul 18 '16 at 5:47
    
Is there any javascript work around to achieve the same functionality? Remaining answers, don't replicate the same feature. They either open a new window or relocate to different url. – SGS Venkatesh Jul 18 '16 at 12:51
    
@AlexeyFShevelyov The link for caniuse is already in the post – Joe P. Oct 7 '16 at 16:03
    
Nice. Being able to rename the file on download is a brilliant feature. Wish it would work in Safari though, seems it's supported in the next version though according to caniuse. – Ben Nov 4 '16 at 11:45
    
Using a combination of download and target="_blank" seems to be sufficient to cover most use cases. Browsers that understand download treat it as a download, otherwise it's opened in a new tab. – MK10 Jan 16 at 14:05
up vote 45 down vote

With jQuery:

$("#fileRequest").click(function() {
    // // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});
share|improve this answer
1  
Perfect, thanks. Do you happen to know if most servers will set the Content-Disposition to 'attachment' by default? – brentonstrine Jul 23 '12 at 21:38
5  
There is no "most." It completely depends. Don't rely on it being set. – Matt Ball Jul 23 '12 at 21:43
    
This issue has been driving me ballistic, and this was the only option that worked (and is supported by IE). I'll add for any n00bs like me that to set the Content-Disposition, all you have to do is: <?php header('Content-Disposition: attachment; filename="filename.here"'); ?> – user124384 Jul 24 '15 at 15:08
up vote 34 down vote

HTML:

<button type="submit" onclick="window.open('file.doc')">Download!</button>
share|improve this answer
8  
Best and most clean solution. But you do not need any extra Javascript here. HTML part with the onclick is enough. – Florian Leitgeb Jan 23 '15 at 13:06
2  
What if i wanna download a xml file? – g07kore May 12 '15 at 20:07
4  
This doesnt work in chrome – slayernoah Nov 19 '15 at 22:54
1  
Thanks for your code. I have tested, it can working in IE, Chrome, Firefox. – muthukumar Sep 22 '16 at 9:11
    
If you have a file acceptable by the browser like a PDF it will open in new tab instead to show download dialog. – WindRider Jan 25 at 18:07
up vote 16 down vote

You can do it with "trick" with invisible iframe. When you set "src" to it, browser reacts as if you would click a link with the same "href". As opposite to solution with form, it enables you to embed additional logic, for example activating download after timeout, when some conditions are met etc.

It is also very silient, there's no blinking new window/tab like when using window.open.

HTML:

<iframe id="invisible" style="display:none;"></iframe>

Javascript:

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}
share|improve this answer
    
this doesn't appear to work in Chrome? – Trevor Daniel Mar 16 '15 at 16:00
    
It does, at least if you actually apprnf the iframe to document.body. – yxhuvud May 27 '16 at 8:01
    
This doesn't seem to be working in Chrome right now, although it used to work. I wonder if it kind of intermittently stops working in different versions of Chrome. – Dobes Vandermeer Oct 21 '16 at 18:08
up vote 3 down vote

Anywhere between your < body > and < /body > tags, put in a button using the below code!

<button><a href = "file.doc" download>Click to Download!</a></button>

This is sure to work!

share|improve this answer
2  
It doesn't in IE or Edge... – Robert Goldwein May 25 '16 at 21:08
    
For Chrome it is a great solution – Hayk Aramyan Jun 15 '16 at 8:13
1  
Doesn't work in Safari either: W3 Schools – Alex Aug 8 '16 at 9:33
1  
Not working in the MS browsers is a rather big problem and Chrome is not always going to be the answer. – Emett Speer Jan 8 at 20:11
up vote 1 down vote

what about that: <input type="button" value="Download Now!" onclick="window.location = 'file.doc';">

share|improve this answer
up vote 1 down vote

This is what finally worked for me since the file to be downloaded was determined when the page is loaded.

JS to update the form's action attribute:

function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}

Calling JS to update the form's action attribute:

<body onLoad="setFormAction();">

Form tag with the submit button:

<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>

The following did NOT work:

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">
share|improve this answer
    
Why the down vote? – slayernoah Jan 19 at 18:33
    
probably because if you have the file at load time, can't you just render the action on the server using a templating engine? why the need for js code? – aepure Feb 23 at 9:48
up vote 1 down vote 
 <a href="complexDownload" download="file.doc" onclick="this.href='file.doc';">
     <button>Download <i>File.doc</i> Now!</button>
 </a>

It doesn't seem to work in Safari, but it did work in Chrome. Also, changing the href attribute of the link once the user clicked it seemed to make it work in older versions of IE, but not in the latest versions of IE or Edge.

share|improve this answer
    
I didn't test it in Opera or any browser other than IE, Edge, Chrome. and Safari yet.... – IamGuest Nov 25 '16 at 23:54
up vote 0 down vote

If you use the tag - do not forget to use the entire url which leads to the file - i.e. <a href="http://www.example.com/folder1/file.doc">Download</a>

share|improve this answer
    
I don't think that's the problem here. Also the "absolute" path isn't needed if the link is in the same path as the file. – Rocket Hazmat Jul 23 '12 at 21:28
    
@Rocket - you are, of course, correct about the absolute path, however, it is the best way to make certain to get it right. I will leave it to the OP to decide if it was helpful - – Mark Jul 23 '12 at 21:33
up vote 0 down vote

I think this is the solution you were looking for

<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

I hade a case where my Javascript generated a CSV file. Since there is no remote URL to download it I use the following implementation.

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}
share|improve this answer
up vote -1 down vote

Use a normal link and style it to look like a button, using CSS.

share|improve this answer
12  
I explicitly said that I do not want to create an anchor that looks like a button. – brentonstrine Jul 23 '12 at 21:30
    
not descriptive enough. If you suggest something show some code to back it up – Kolob Canyon Jan 9 at 23:40

protected by Community♦ Jun 10 '14 at 13:26

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?

Not the answer you're looking for? Browse other questions tagged or ask your own question.