55

Possible Duplicate:
Is it possible to initiate a download prompt in the browser for recognized MIME types using only JavaScript (client-side approach)?

Is there a way to force a browser with a JavaScript routine to save a file as ("save as") after clicking a link? I need for images to be downloaded directly by default and not rendered by the browser.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Jackson Henley
  • 1,531
  • 2
  • 15
  • 27

2 Answers2

205

You could use the HTML5 download attribute like so: 

<a href="path/to/file" download>Click here to download</a>

This opens a "save as" dialog regardless of file type without taking you away from the page.

Austin
  • 6,026
  • 2
  • 24
  • 24
  • 8
    My current understanding is that this attribute is only recognized and honored in Google Chrome. – Freesnöw Jul 05 '12 at 22:35
  • 3
    Does it degrade gracefully for those browsers that do not support it yet? – Jackson Henley Jul 05 '12 at 22:37
  • 5
    @JacksonHenley It links to the resource basically just ignoring the download attribute. Check out this fiddle here: http://jsfiddle.net/GTCfy/ I've also verified it. *It does not work in the latest versions of Internet Explorer, Mozilla Firefox, or Safari.* All others are untested. *It does work in Google Chrome*. – Freesnöw Jul 05 '12 at 22:38
  • 1
    A note here, I tried to [click the link with JavaScript](http://jsfiddle.net/DerekL/uMwqc/), but just like what I expected, it won't work. – Derek 朕會功夫 Jul 05 '12 at 22:39
  • 2
    try $("a")[0].click() to access the DOMs click, as opposed to jQuery's, it works – Austin Jul 05 '12 at 22:44
  • @Austin - Woot! [It does](http://jsfiddle.net/DerekL/uMwqc/2/)! – Derek 朕會功夫 Jul 05 '12 at 22:58
  • 2
    These days this works in Firefox and Opera as well. See http://caniuse.com/download for exact coverage. – Tgr Mar 17 '14 at 19:39
  • 8
    Not fool proof but simple and effective in most cases :) See here for current browser support: http://caniuse.com/#feat=download – lorem monkey Apr 29 '14 at 16:17
  • http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download – brita_ Jun 04 '14 at 16:49
  • 2
    This does not work for me. (Safari 4.0.6) –  Apr 12 '15 at 19:22
  • 2
    It does not work in the latest versions of Internet Explorer, Mozilla Firefox, or Safari. All others are untested. It does work in Google Chrome Date: `13 May 2017` – Code Cooker May 13 '17 at 05:06
  • 1
    works for me in IE 11.0.96 – blamb Jul 26 '17 at 17:45
  • 1
    @CodeCooker Working on Chromium 63 `18/01/2018` – meyer1994 Jan 18 '18 at 03:26
  • @meyer1994 I did already mention that it is working on Chrome/Chromium LOL, Doesn't make sense to mention about this after some months! – Code Cooker Jan 18 '18 at 05:49
  • 1
    The specification doesn't mention "save-as dialog", and so the action depends on the file-type. For instance, I have not yet found a way to force a save-as dialog for TXT and XML files. Instead, the browsers try to display the content in another tab. – ACProctor Dec 11 '20 at 16:29
15

If you control the server, then you should set it up to send a Content-Disposition: attachment header for the files you wish to be downloaded (e.g. you can do this in an .htaccess file to make all .jpegs in a particular directory).

M Somerville
  • 4,499
  • 30
  • 38