Html 点击下载按钮即可下载giphy gif

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

W3学校有一个触发下载的工作示例：

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

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

<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>

---

有人能解释一下原因吗？

在您所附的w3schools示例中，您应该单击开始下载的链接文本是一个图像。他们在锚定标记中放置了一个图像（

），您将图像的URL设置为href attr。因此，如果更改href，将下载不同的文件

---

为什么它不起作用的问题是

下载

属性只适用于相同来源的URL。你可以在这里找到详细信息

作为替代方案，您可以使用类似的javascript来实现同样的效果

功能下载\u img（e，link）{
var image=新图像（）；
image.crossOrigin=“匿名”；
image.src=链接；
image.onload=函数（）{
var canvas=document.createElement（'canvas'）；
canvas.width=this.naturalWidth；//如果需要特殊/缩放尺寸，请选择“width”
canvas.height=this.naturalHeight；//如果需要特殊/缩放尺寸，请选择“height”
canvas.getContext（'2d'）.drawImage（this，0，0）；
var-blob；
//…获取为数据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”）；
}否则{
blob=canvas.toDataURL（“image/png”）；
}
tempbtn=document.createElement（'a'）；
tempbtn.href=blob；
tempbtn.download='image.jpg'；//或定义您自己的名称。
tempbtn.click（）；
tempbtn.remove（）；
};
}

注意：Edge版本12、IE、Safari 10（及更早版本）或Opera版本12（及更早版本）不支持下载属性

我问了同样的问题，以下是对我有效的代码：

(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();
})();

---

哇，我很惊讶它开始下载了！！很酷。为了让它更复杂，我希望它下载一个动画gif。例如：太棒了，谢谢！我试图在java中实现同样的效果，我不断得到一个HTML页面，看，你没有看到那个错误吗？