Download Image From Web Server On Button Click Using JavaScript

Question

How can i download an image when the user presses a button on the web page. I don't want to use <a href download="file"> as it doesn't work on some devices. How can i do this using JavaScript

Possible duplicate of Force Download an Image Using Javascript — Mike Cluck
– Mike Cluck, Commented May 10, 2016 at 17:35

jgdev · Accepted Answer · 2016-05-10 17:39:57Z

2

You need to add download attr to <a></a> link, or by event of other element:

$('button.download', modal).on('click', function (e) {
  e.preventDefault();

  var url = ""; // Some URL.
  var fileName = "image.jpeg"; // Some File name

  var a = $('<a href="' + url + '"></a>')
    .attr('download', fileName)
    .appendTo('body');

  a.click(function () {
    a[0].click();
    $(this).remove();
  });

  a.trigger('click');
});

[EDIT] In case of you don't want to use it, you <a></a> link need to have these headers in the server response of the file to download:

Content-Type: application/force-download

Content-Disposition: attachment; filename="image.jpeg"

Content-Transfer-Encoding: binary

edited May 10, 2016 at 17:39

answered May 10, 2016 at 17:35

jgdev

5294 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Download Image From Web Server On Button Click Using JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related