前端下载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;
            if (!name && xhr.response.headers['content-disposition']) {
               //后端需要对content-disposition这个字段进行授权，前端才能获取到后端返回的名称
               let dispositionStr = xhr.response.headers['content-disposition'];
               // 获取后端返回的文件名
               let dispositionArr = dispositionStr.split(";");
               // 文件名可能含有汉字,因此在后端进行了UTF-8编码处理,此处进行解码
               let res = decodeURIComponent(dispositionArr[1]);
               name = res.split("''")[1];
            }
            link.download = name + '.xlsx';
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(csvUrl);
        }
    };
    xhr.send();
}

如果后端返回的文件格式是txt，前端可以将.txt文件转成.xlsx。

import axios from 'axios'
// 创建 axios 实例
const service = axios.create({
    baseURL: 'http://www.***.com/aips/',
    timeout: 9E3 // 请求超时时间
});
// 响应拦截器
service.interceptors.response.use((response) => {
    // 返回啊应头,下载文件可获取content-disposition属性
    response.data.headers = response.headers
    return response.data;
}, (error)=>{
})

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;
        if (!fileName && data.headers['content-disposition']) {
           //后端需要对content-disposition这个字段进行授权，前端才能获取到后端返回的名称
           let dispositionStr = data.headers['content-disposition'];
           // 获取后端返回的文件名
           let dispositionArr = dispositionStr.split(";");
           // 文件名可能含有汉字,因此在后端进行了UTF-8编码处理,此处进行解码
           let res = decodeURIComponent(dispositionArr[1]);
           fileName = res.split("''")[1];
        }
        link.setAttribute('download', fileName + '.xlsx');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link); //下载完成移除元素
        window.URL.revokeObjectURL(url); //释放掉blob对象
    }
});

vue使用blob下载二进制文件流时无法获取响应头里面的Content-Disposition来提取文件名的解决办法blob获取文件名风~蒲公英的博客-CSDN博客