从 s3 存储桶在 web 中强制下载移动应用程序上传的图像。 它在选项卡中打开而不是下载

Question

我正在尝试单击下载图像并为此使用 HTML5 的“下载”属性。 此图像已由移动应用程序上传到 s3 存储桶中。 但它会将用户重定向到新选项卡，而不是下载图像。我想直接下载此图像。

<a href="<link>" download="file.jpg" target="_blank">Download image</a>

我该如何解决这个..？ 提前致谢

Answer 1

试试这个代码：

function forceDownload(blob, filename) {
 var a = document.createElement('a');
  a.download = filename;
  a.href = blob;
  document.body.appendChild(a);
  a.click();
  a.remove();
}

// Current blob size limit is around 500MB for browsers
function downloadResource(url, filename) {
  if (!filename) filename = url.split('\\').pop().split('/').pop();
  fetch(url, {
      headers: new Headers({
        'Origin': location.origin
      }),
      mode: 'cors'
    })
    .then(response => response.blob())
    .then(blob => {
      let blobUrl = window.URL.createObjectURL(blob);
      forceDownload(blobUrl, filename);
    })
    .catch(e => console.error(e));
}

downloadResource('https://pixxort-prod.s3.amazonaws.com/records/c6e6d1617041434da83ab5b959278fc41604921530373.jpg');

它会强制浏览器从网络下载资源。