参考文章:https://www.cnblogs.com/cntt/p/13564035.html
download属性
download是html5新出现的属性。download仅支持同源策略,如果非同源的话,download会失效 且直接跳转到相对应href的界面。
<a href="url" download="下载.doxc">下载</a>
blob方法
let url ="url";
let name ="百度.docx";
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();
先把地址变成blob地址,然后创建隐藏的可下载链接,将response中的原始数据的类文件对象(response.blob)作为连接放在隐藏连接下,然后在模拟click事件,最后移除出去,这样就可以用跨域的方式获得一个制定命名的文件。
如果是文件流形式的 使用以下方法:
//首先请求接口 返回的数据为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();
}