功能描述

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

实现步骤

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

返回文件流形式，后端需要设置接口的response header为：

response.setContentType("application/octet-stream");

2. 修改axios请求的responseType为blob

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

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

//对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性，IE10+支持blob但是依然不支持download
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')
}

至此，我们已经实现了下载Excel文件的功能，完整代码如下：

完整代码

 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)
          })
      },

附加

在本地测试时我们可能会发现：虽然axios设置了responseType: 'blob'，但是拿到的res.data并不是Blob类型，而是一大串乱码，类似于下图：

这是因为Vue项目中可能使用了mockjs，mock模块会影响原生的ajax请求，使得服务器返回的blob类型变成乱码。

解决方法也很简单：在Vue的main.js中把require('./mock')注释掉即可。