【下载导出文件】原生axios两种前端下载EXCEL文件的方式

原生请求下载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对象
    }
});