点击按钮，向后台发送axios请求，实现下载Excel文件的功能。

确认后端返回的是文件流的形式

返回文件流形式，后端需要设置接口的response header为：
response.setContentType("application/octet-stream");

修改axios请求的responseType为blob

1
2
3
4
5
axios({
    url: '',
    method: 'get',
    responseType: 'blob'
     }).then(res => {}).catch((err) => {})

处理后端返回的文件流，实现文件下载

对于标签，只有 Firefox 和 Chrome（内核） 支持 download 属性，IE10+支持blob但是依然不支持download

1
2
3
4
5
6
7
8
9
10
11
12
if ('download' in document.createElement('a')) {//支持a标签download的浏览器
    let url = window.URL.createObjectURL(res.data);//为文件流创建构建下载链接
    let link = document.createElement('a');//创建a标签
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', 'xxx.xlsx');//设置a标签的下载动作和下载文件名
    document.body.appendChild(link);
    link.click();//执行下载
    document.body.removeChild(link);//释放标签
} else {//其他浏览器
    navigator.msSaveBlob(res.data, 'xxx.xlsx')
}

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
exportExcel() {
    this.axios({
        method: 'get',
        url: '你的请求地址',
        responseType: 'blob'
    }).then((res) => {
        if ('download' in document.createElement('a')) {
            let url = window.URL.createObjectURL(res.data);
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.setAttribute('download', 'xxx.xlsx');
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        } else {
            navigator.msSaveBlob(res.data, 'xxx.xlsx')
        }
    }).catch(err => {
        this.$Message.error(err)
    })
},

附加

mock模块会影响原生的ajax请求，使得服务器返回的blob类型变成乱码。
解决方法也很简单：把require(‘./mock’)注释掉即可。

作者：西瓜鱼仔 链接：https://www.jianshu.com/p/5a5574fb0a22