Instant download image on button click

Question

I'm trying to make simple button which when is clicked will download image. Currently when I click it is open image on blank page where you should click "Save as.."

How can I "force" the browser to download it?

This is current image and button

<img src="{{ $thumb }}" class="img-responsive">             
<a type="submit" download="{{ $thumb }}" href="{{ $thumb }}" class="btn btn-primary"> 
    Download Image
</a>

I've tried:

download="{{ $thumb }}"

Also

download="{{ $thumb }}" target="_blank"

Also tried to put the <img...> tag inside <a href..> tag and still doesn't work.

Answer 1

You can try this to force download an image.
However you cannot download something that is not on your domain, unless you are using a domain which accepts cross origin requests (Eg:Imgur)

You may use the 'download' attribute of HTML5 but still you won't be able to load in cross origin image.

Also the below method will support legacy browsers as well

function forceDownload(link){
    var url = link.getAttribute("data-href");
    var fileName = link.getAttribute("download");
    link.innerText = "Working...";
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
        link.innerText="Download Image";
    }
    xhr.send();
}

<a href="#" data-href='https://i.imgur.com/Mc12OXx.png' download="Image.jpg" onclick='forceDownload(this)'>Download Image</a>

Note: You cannot force the browser to show a 'Save As' dialog as it is based upon what the user preferences are.

Answer 2

<a href="/images/img.jpg" download> By adding this you can download image automatically by just one click
note: The download attribute is not supported in Edge version 12, IE, Safari 10 (and earlier), or Opera version 12 (and earlier).

Answer 3

Try this

<img src="{{ $thumb }}" class="img-responsive">             
<a href="{{ $thumb }}" class="btn btn-primary" download> 
    Download Image
</a>

Answer 4

Another option is using the fetch methods

function downloadFile(elmnt) {
  
  const link = elmnt
  const url = 'https://assets.ctfassets.net/cfexf643femz/8rnHaKLBl6L4t1LmuV0OG/03d7ee1d08119fce2a3f80b93b97ab05/Lagos_de_Torca_en_cifras.pdf'
const options = {
  'Accept': 'application/json',
  'Content-Type': 'application/json'
};
  
 fetch(url, options)
  .then( response => {
    response.blob().then(blob => {
        let url = window.URL.createObjectURL(blob);
        let a = document.createElement('a');
        a.href = url;
        a.download = "file.pdf";
        a.click();
      });
    }); 
}

https://codepen.io/edgarv09/pen/KKabVob example

Answer 5

Based on the selected answer above by Jones Joseph, I modified his code to not require an anchor tag in the html to link from. Rather I used a button and in AngularJS passed the name of the photo file as a parameter to ng-click.

The HTML

<button ng-click="MainController.newDownload(MainController.oPhoto.filename)">Download Photo</button>

The JavaScript:

    this.newDownload = function(filename){
    var url = 'photos/' + filename
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = filename;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
        link.innerText="Download Image";
    }
    xhr.send();
  }

Works in Chrome 107.0.5304.122 (Official Build) (64-bit)