1

how can i achieve the following with a button tag:

<a id="download" href="a.jpg" download="a.jpg">Download</a>

P.S: when you click on the button, it should download the a.jpg file and NOT open it in the browser.

donsalari
  • 61
  • 1
  • 2
  • 10
  • See http://stackoverflow.com/questions/2408146/href-image-link-download-on-click?lq=1 – Andrew Briggs Sep 15 '13 at 00:52
  • you have to point it to some php page something like download.php?file=a.jpg and in this php page set needed headers to force a download (so then the php processes the output to browser), more on google. – Wiggler Jtag Sep 15 '13 at 00:52
  • ok ill try that and get back. – donsalari Sep 15 '13 at 00:59
  • Following the link that Briggs gave, there is an answer on that page that is worth looking into using `mod_rewrite` http://stackoverflow.com/a/2408183/1415724 – Funk Forty Niner Sep 15 '13 at 01:46

5 Answers5

3

You want Content-Disposition: attachment; in the backend. You'll need a script handing out the images to force a download.

Collin Grady
  • 2,226
  • 1
  • 14
  • 14
3

You can add the attribute download, which is new to HTML5 and is supported by Firefox and Chrome but not yet IE or Opera:

<a id="download" href="a.jpg" download="a.jpg">Download</a>
Anthony
  • 36,459
  • 25
  • 97
  • 163
  • I want to use the button tag. So i was looking for something like the download attribute in the button tag. – donsalari Sep 18 '13 at 03:05
  • Ohhhh... I had a similar issue a long time ago (before the download attribute was a potential option) so I can imagine your situation. Unfortunately, the `button` element is not an actual link, so it wouldn't make sense for it to have link-type attributes. You would need to leverage the File API a bit deeper to have the button both point to something *and* initiate a download. Will think on it, but how are you currently handling the redirect with the button? – Anthony Sep 19 '13 at 19:10
0

Solution for modern browsers

With image link

<a href="a.jpg" download="imageName"><img src="images/a.jpg" alt="Image"/></a>

With text link

<a href="a.jpg" download="imageName">Download Image</a>

Browser Support

Milan and Friends
  • 5,560
  • 1
  • 20
  • 28
0
<a   href="test.png"  download  ><input type="button" id="btn1"     onclick="saveAsImg(document.getElementById('chart_div'));" title="Download Png"  /></a>

find parent of id="btn1"  
like  $("#btn1").parent().get(0).href=$("img1").src;
Milind Morey
  • 2,100
  • 19
  • 15
0

In some cases does not work

<a id="download" href="a.jpg" download="a.jpg">Download</a>

because, server don't want to anyone download content normally method. so we needed force download method.

I think you should
Try this