0

我想为图像创建一键下载链接。我得到与 html5 下载属性不一致的结果。

W3 学校有一个触发下载的工作示例： https ://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_download

当我将图像网址更改为其他任何内容时，它不会触发文件下载。

例如，此代码不会触发下载：

<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" download>

谁能解释为什么？

4

3 回答 3

1

我问了同样的问题，这是对我有用的代码：

(async () => {
  //create new a element
  let a = document.createElement('a');
  // get image as blob
  let response = await fetch('https://media2.giphy.com/media/DvyLQztQwmyAM/giphy.gif?cid=e9ff928175irq2ybzjyiuicjuxk21vv4jyyn0ut5o0d7co50&rid=giphy.gif');
  let file = await response.blob();
  // use download attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes
  a.download = 'myGif';
  a.href = window.URL.createObjectURL(file);
  //store download url in javascript https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes#JavaScript_access
  a.dataset.downloadurl = ['application/octet-stream', a.download, a.href].join(':');
  //click on element to start download
  a.click();
})();
于 2020-08-16T19:49:43.490 回答
0

在您附加的 w3schools 示例中，您应该单击以开始下载的链接文本是图像。他们将图像放在锚标记 ( <a></a>) 中，然后将 URL 提供给锚的 href attr。然后，如果您更改href，则url将更改而不更改图像，您可以通过单击图像开始下载。

在您附加到您的问题的代码中（如果您将其添加到它的末尾，它正在工作并将图像下载为文件</a>。），您已将图像的 URL 提供为 href attr。因此，如果您更改 href，则会下载不同的文件。

<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" download>click</a>

如果你想点击你的图片开始下载，你应该在锚点内放一张图片，然后给出 href attr，你的文件 URL。

<a href="" download>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" alt="image" width="100" />
</a>

于 2020-01-18T07:40:54.927 回答
0

为什么它不起作用的问题是该download属性仅适用于同源 URL。您可以在此处找到详细信息MDN Docs

至于替代方案，您可以使用一些像这样的 javascript 来实现相同的目的。

function download_img(e,link){
var image = new Image();
image.crossOrigin = "anonymous";
image.src = link;
image.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
    canvas.getContext('2d').drawImage(this, 0, 0);
    var blob;
    // ... get as Data URI
    if (image.src.indexOf(".jpg") > -1) {
    blob = canvas.toDataURL("image/jpeg");
    } else if (image.src.indexOf(".png") > -1) {
    blob = canvas.toDataURL("image/png");
    } else if (image.src.indexOf(".gif") > -1) {
    blob = canvas.toDataURL("image/gif");
    } else {
    blob = canvas.toDataURL("image/png");
    }
    tempbtn = document.createElement('a');
    tempbtn.href = blob;
    tempbtn.download = 'image.jpg'; // or define your own name. 
    tempbtn.click();
    tempbtn.remove(); 
};
}
<!DOCTYPE html>
<html>
<body>

   
<a href="#" onclick="download_img(this,'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg')"  >Download image
</a>

<p><b>Note:</b> The download attribute is not supported in Edge version 12, IE, Safari 10 (and earlier), or Opera version 12 (and earlier).</p>
 
</body>
</html>

于 2020-01-18T11:35:10.900 回答