原生请求下载excel文件
//如果文件流下载是不带code,使用axios请求进行下载会被响应拦截,故使用原生请求进行下载
export function download(url, name) {
var xhr = new XMLHttpRequest();
xhr.open("get", url);
xhr.responseType = "blob";
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var blob = new Blob([xhr.response], { type: "text/xls" });
var csvUrl = URL.createObjectURL(blob);
var link = document.createElement("a");
link.href = csvUrl;
link.download = name + '.xlsx';
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(csvUrl);
}
};
xhr.send();
}
axios下载
根据服务器返回的数据类型进行设置responseType:
responseType: ‘blob’, //表示服务器响应的数据类型,可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’(默认), ‘text’, ‘stream’
例如,如果后端返回的文件格式是txt,前端可以将.txt文件转成.xlsx。
axios({
url: "http://www.***.com/***/***", //用于请求的服务器 URL
params: {}, //必须是一个无格式对象(plain object)或 URLSearchParams 对象
method: 'get', //请求时使用的方法,get默认
responseType: 'blob', //表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json'(默认), 'text', 'stream'
}).then(data => {
if (!data) return alert('文件下载失败');
let fileName = '统计表计';
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xlsx');
} else {
let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', fileName + '.xlsx');
document.body.appendChild(link);
link.click();
document.body.removeChild(link); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
}
});