axios获取文件流导出excel表格

一、导出excel表格实现的具体思路：

1.创建一个a标签；
2.获取响应头content-disposition作为文件名；
3.利用a标签的download属性进行下载

二、理解什么是 Content-Disposition

在常规的HTTP应答中，Content-Disposition 消息头指示回复的内容该以何种形式展示，是以内联的形式（即网页或者页面的一部分），还是以附件的形式下载并保存到本地。
如图所示，后端返回的数据：

excelResponse.png

三、完整导出表格代码

本部分代码基于vue-cli和axios开发，不会的小伙伴要加油了，9012年了。(*￣︶￣)

在main.js全局注册axios:

import axios from 'axios'
Vue.prototype.$axios = axios

exportExcel() {
    this.$axios({
        method: method,
        url: url,
        data: data,
        responseType: 'blob'
    }).then(data => {
        console.log(data);
        let code = decodeURI(data.headers['code']);
        if (code == 0) {
            console.log('导出成功');
            // 截取文件名，这里是后端返回了文件名+后缀，如果没有可以自己拼接
            let fileName = decodeURI(data.headers['content-disposition'].split(':')[1].split('=')[1]);
            // 将`blob`对象转化成一个可访问的`url`
            let url = window.URL.createObjectURL(new Blob([data.data]));
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.setAttribute('download', fileName);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }).catch(data => {
        console.log('导出失败');
    })
}

ps：细心的小伙伴可能发现decodeURI并没有解决中文乱码的问题，可以看到上面的图，content-disposition解析不了，但是其实message可以正常解析，自己猜测这与后台编码方式有关，具体可以参考https://blog.csdn.net/xiaocai9999/article/details/78228837