前端各种下载方式
jquery将返回的数据转换成了strting,不支持blob类型
原生方式:
function download(url,name='data.docx') {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); // 也可以使用POST方式,根据接口
xhr.responseType = "blob"; // 设置返回类型blob
// 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
xhr.onload = function () { // 请求完成
if (this.status === 200) { // 返回200
var blob = this.response;
var reader = new FileReader();
reader.readAsDataURL(blob); // 转换为base64,可以直接放入a标签的href
reader.onload = function (e) { // 转换完成,创建一个a标签用于下载
var a = document.createElement('a');
a.download = name;
a.href = e.target.result;
document.body.append(a); // 修复firefox中无法触发click
a.click();
a.remove && a.remove();
}
}
}; // 发送ajax请求
xhr.send()
}
使用axios下载:
axios.get(
url,
data,
{responseType:'blob'}
).then(res => {
const disposition = res.headers['content-disposition'];
// 拿到文件名
let filename = disposition.split('filename=')[1];
var blob =res.data;
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = (e)=> {
var a = document.createElement('a');
a.download = filename;
a.href = e.target.result; //转base64
document.body.append(a);
a.click();
a.remove && a.remove();
};
});