下载首先想到的就是a标签的download的属性,download是html5新出现的属性
<a href="/images/mimage.jpg" download="下载">
//href 是指向下载的超链接
//download 对应的是下载的文件名
download支持的浏览器及版本
download仅支持同源策略,如果非同源的话,download会失效 且直接跳转到相对应href的界面。
如果是非同源 使用以下方法:
let url ="https://baidu.com";
let name ="百度";
const downloadRes = async () => {
let response = await fetch(url); // 内容转变成blob地址
let blob = await response.blob(); // 创建隐藏的可下载链接
let objectUrl = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = objectUrl;
a.download = name;
a.click()
a.remove();
}
downloadRes();
如果是文件流形式的 使用以下方法:
//首先请求接口 返回的数据为res
if (window.navigator.msSaveOrOpenBlob) {
// 兼容ie11
var blobObject = new Blob([res.result]);
window.navigator.msSaveOrOpenBlob(blobObject, name);
} else {
let url = URL.createObjectURL(new Blob([res]));
let a = document.createElement("a");
document.body.appendChild(a);
a.href = url;
a.download = name;
a.target = "_blank";
a.click();
a.remove();
}
附带一个关于其他小伙伴写的关于下载的链接:https://blog.csdn.net/qq_43471802/article/details/103436595