前言
据mdn描述的a标签释义:利用的就是download属性只在同源 URL
或 blob:、data:
协议起作用
1.后端返回文件流,前端利用Blob解析文件流下载
2.下载资源必须是与页面地址同源时,直接利用a标签下载
注意点:
- 下载资源必须与页面地址同源
- 如果非同源,那么点击a标签时在新窗口打开图片的
3.利用fetch或者xhr从图片地址获取二进制数据(blob)进行下载(利用blob:协议)
代码如下:
fetch('https://cdn.beekka.com/blogimg/asset/202012/bg2020122613.jpg')
.then(res => {
res.blob().then(res => {
console.log(res);
const link = document.createElement('a');
link.href = window.URL.createObjectURL(res);
link.download = '22';
link.click();
window.URL.revokeObjectURL(link.href);
})
})