29

Is it possible to force a download through JS or Javascript i-e the web page should not open the file in new tab in the browser but to pop up to let the user to choose eith "save as" or open with ???

Shaun
  • 2,313
  • 7
  • 36
  • 43
  • 3
    Duplicate of this? http://stackoverflow.com/questions/727144/browser-download-file-prompt-using-javascript – Marcus Frödin Mar 04 '11 at 11:09
  • It is indeed. Good example of a useful duplicate, because the question title is worded fairly differently, even though it’s talking about the same thing. – Paul D. Waite Mar 04 '11 at 11:12

5 Answers5

61

With the advent of HTML5 you could just use the new property download in the anchor tag.

The code will look something like 

<a download="name_of_downloaded_file" href="path/to/the/download/file"> Clicking on this link will force download the file</a>

It works on firefox and chrome latest version. Should I mention that I didn't check it in IE? :P

Edited the download attribute after comment from sstur

https://caniuse.com/#feat=download

Axel
  • 3,331
  • 11
  • 35
  • 58
Gokul N K
  • 2,428
  • 2
  • 32
  • 40
  • 3
    It's worth noting that you can specify a value for the download attribute and that will become the default filename for the download. – sstur Oct 23 '13 at 05:20
  • 1
    This indeed is the more progressive solution, but as of Nov/2013 has no support in IE or on most mobile devices. (Source : http://caniuse.com/#feat=download ) – mcranston18 Nov 18 '13 at 19:18
  • 1
    It doesn't work with Opera or IE, however this I still like this solution myself. – Steve Byrne May 31 '14 at 06:17
  • +1 to this more modern solution, but main remains valid until this one is implemented by all major browsers – Sean Patrick Floyd Aug 07 '14 at 11:50
  • 1
    Just implemented this after chasing PHP delivery timeouts for ... too long; and this got me out of the water in minutes. In everything but #MicrosoftInternetExplorer11 - still... as of 8/7/14. #Microsoft's terrible track record and miserable acceptable of the community around them aside - cheers to what I'm calling my new method of delivering downloads. Thank you. – DigitalJedi805 Aug 07 '14 at 16:15
  • 12
    As a [security feature](https://bugzilla.mozilla.org/show_bug.cgi?id=676619), the download value that you specify will be ignored when the content is on a different hostname with the origins limited with headers like `X-Frame-Options: SAMEORIGIN`. – SammyK Jan 14 '15 at 08:05
  • The question is about forcing a pdf file to download without clicking anything. Like when some page is opened or a form is filled pdf is downloaded after thank you message. – Rolen Koh Sep 17 '15 at 04:00
  • This `download` attribute does not do what you seem to think it does. –  May 28 '18 at 17:38
  • 3
    Well, browsers will prevent you from enable downloading of files in different sites or under different ports, so quite a limited feature.... – user1156544 Aug 13 '18 at 16:40
31

dynamic create link and click it with download attribute for force download as file:

var anchor = document.createElement('a');
anchor.href = this.props.download_url;
anchor.target = '_blank';
anchor.download = this.props.file_name;
anchor.click();

Take a notice that i didn't even added it to DOM, so it's fast.

P.S download attribute won't work with IE. But it will just open link in new tab. http://caniuse.com/#feat=download

Lukas Liesis
  • 24,652
  • 10
  • 111
  • 109
  • 1
    And click() doesn't work for many browsers too, or only for buttons : https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click – Bastien Robert May 07 '18 at 15:06
  • What browsers? Old default android? I never had a ticket about this not working and this answer is several years old already. Make a test, show what is not working. – Lukas Liesis May 07 '18 at 19:25
  • 1
    I can’t test with Edge and IE but last verstion of Firefox is not compatible with click() for a but only for buttons. Check the MDN link I just set before, in the bottom, special note for Gecko and it’s the same under safari 6 and chrome 20 (sure, old browsers) – Bastien Robert May 08 '18 at 08:58
19

You can not force that behavior from JavaScript, the HTTP Headers need to be set on the server side:

Content-disposition=attachment; filename=some.file.name

The way you can solve the problem is to let your AJAX method redirect the user to the URL of the PDF:

location.replace('path/to.pdf');

(The above HTTP headers must be set for the PDF)

Update

At the time of this answer, it wasn't possible. Now it is, scroll down to see the other answer saying so.

Sean Patrick Floyd
  • 292,901
  • 67
  • 465
  • 588
3

No, it is not possible and thanks God it isn't. Otherwise I leave you to the imagination of what kind of files could be stored on your computer when you visit a web site without you knowing it.

As @Paul D. White pointed out in the comments section if you want to open the file inline (inside the browser) with the default program associated with it you could have the server send the Content-Disposition HTTP header. For example:

Content-Disposition: inline; filename=foo.pdf
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • Correct: you can only do it on the server-side, because it’s done by setting an HTTP response header (specifically `content-disposition: attachment`). Once the page is open in the client, the HTTP response has, by definition, already been processed. – Paul D. Waite Mar 04 '11 at 11:11
  • The asker clearly says that he wants to use it with a dialog in stead of opening a new tab, so it isn't exactly what you are replying to? – gnur Mar 04 '11 at 11:11
  • @gnur, correct. I will update my answer to include @Paul D. White excellent proposal. – Darin Dimitrov Mar 04 '11 at 11:12
  • Currently i have a button on the page to download pdf..... What it does is invokes a ajax function which uses a back end PHP file to store the PDF on disk.Then i want to simply force download that PDF in the ajax success method ..... – Shaun Mar 04 '11 at 11:13
  • @user418232, I am afraid this is impossible. You CANNOT write to the client computer using javascript. – Darin Dimitrov Mar 04 '11 at 11:14
  • This answer is not precisely correct. More importantly, it doesn't address the question. Clearly the OP is not asking for direct access to the filesystem, because s/he specifically mentions the "save as" dialog. – Ian Ni-Lewis Aug 03 '15 at 16:21
  • "*Otherwise I leave you to the imagination of what kind of files could be stored on your computer when you visit a web site without you knowing it.*" Behond the almighty power of HTML5 (Chrome/Safari/iOS only): http://filldisk.com/ – i336_ Nov 20 '16 at 11:36
3

No this is not possible with JQuery/JavaScript only.

You will need a server side script which returns you the file with a Content-Type (HTTP Header) which will force the browser to download your requested file. An possible value for Content-Type would be application/force-download.

Daniel Kutik
  • 6,997
  • 2
  • 27
  • 34
  • But even such a header will not force a download, depending on how the user has set the optional locally on his browser. –  May 28 '18 at 17:39