vue下载网络图片
针对单文件的情况下,同源的文件,可以通过 < a> 标签的 download 属性下载文件
const elt = document.createElement('a');
elt.setAttribute('href', url);
elt.setAttribute('download', 'file.png');
elt.style.display = 'none';
document.body.appendChild(elt);
elt.click();
document.body.removeChild(elt);
如果不存在CORS问题, 可以借助Blob实现下载(构造xhr请求文件地址, 以Blob的形式接收Response):
function downloadWithBlob(url) {
fetch(url).then(res => res.blob().then(blob => {
var a = document.createElement('a');
var url = window.URL.createObjectURL(blob);
var filename = 'file.png';
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
}));
}
如果存在CORS问题,可以考虑使用 canvas 将图片转换成 base64 编码之后再通过 标签的 download 属性下载:
调用部分
download() {
this.getUrlBase64(‘此处传入图片链接’).then(base64 => {
let link = document.createElement('a')
link.href = base64
link.download = 'qrCode.png'
link.click()
})
},
作者:rithe
链接:https://www.jianshu.com/p/6af20a47ad3d