Question

我试图制作简单的按钮，点击它时会下载图像。目前，当我点击它是空白页面上的打开图像，您应该点击＆＃34;另存为...＆＃34;

我怎样才能强迫＆＃34;浏览器下载它？

这是当前图片和按钮

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

我试过了：

download="{{ $thumb }}"

另外

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

还尝试将<img...>标记放在<a href..>标记内，但仍然无效。

Answer 1

<a href="/images/img.jpg" download>通过添加此功能，您只需点击一下即可自动下载图像注意：Edge版本12，IE，Safari 10（及更早版本）或Opera版本12（及更早版本）不支持下载属性。

Answer 2

您可以尝试此操作以强制下载图像但是，除非您使用的域名接受跨源请求，否则您无法下载域名以外的内容（例如：Imgur）

您可以使用HTML5的'下载'属性，但仍然无法加载跨原始图像。

此外，以下方法也将支持旧版浏览器

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>

注意：您无法强制浏览器显示“另存为”对话框，因为它基于用户偏好设置。

Answer 3

试试这个

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

Answer 4

另一种选择是使用 fetch 方法

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

按钮单击即时下载图像

4 个答案: