Force browser to download an image on click of a link using jquery

Question

I would like to start download of an image on click of a link.

<a id="downloadImage" href="imagepath">Click here to download</a>

I know we can use download attribute of HTML5 (Force a browser to save file as after clicking link) but I would not like to use it as it will not be working in older versions of browsers. I did tried the method here: Download File Using Javascript/jQuery but it opens the image in the iframe .

Can anybody help me to force a browser to download an image onclick of a link using jquery?

I *think* this can be solved from the server using the Content-Disposition HTTP header. What server-side technology are you using? — Nikos Paraskevopoulos, Oct 29 '13 at 10:34
possible duplicate of [Is there a way to force the user to download a file from a href link rather than to open it in a browser window?](http://stackoverflow.com/questions/3841578/is-there-a-way-to-force-the-user-to-download-a-file-from-a-href-link-rather-than) — James Donnelly, Oct 29 '13 at 10:35
@NikosParaskevopoulos I would like to download this using client side scripting only...FYI we are using Asp.Net — Maninder, Oct 29 '13 at 10:36
same for PDF: http://stackoverflow.com/questions/2598658/how-to-force-a-pdf-download-automatically — Ciro Santilli OurBigBook.com, Nov 07 '14 at 11:59

score 7 · Answer 1 · edited May 23 '17 at 12:28

7

As far as I know there is no client-side cross-browser solution for this issue (doesn't matter using jQuery or any other UI toolkit). What you need to do in order to trigger browser to download a file is to add some HTTP headers to the server response:

Content-Type: application/octet-stream
Content-Disposition: attachment; filename=image.jpg

This post may also be helpful for you.

edited May 23 '17 at 12:28

Community

1
1

answered Oct 29 '13 at 10:36

Vadim

8,701
4
43
50

How can we do this in asp.net? – Maninder Oct 29 '13 at 10:59
@Maninder Official documentation of adding header for asp.net: http://msdn.microsoft.com/en-us/library/ms524327(v=vs.90).aspx – Vadim Oct 29 '13 at 11:08
http://css-tricks.com/snippets/htaccess/force-files-to-download-not-open-in-browser/ – honzajde Jan 30 '14 at 15:12

score 5 · Answer 2 · answered Oct 29 '13 at 10:46

You can use the download attribute, while not fully supported across browsers, you can use modernizr to support/fallback for unsupported browsers.

For supported browsers, check http://caniuse.com/#feat=download

<a href="/path/to/image.jpg" title="ImageName" download="ImageName" >
    <img src="/path/to/image.jpg" alt="ImageName">
</a>

Force browser to download an image on click of a link using jquery

2 Answers2

Linked

Related