Vue中导出Excel表格方法

本文记录一下在Vue中实现导出Excel表格的做法。参考度娘上各篇博客，最后实现功能

Excel表格，我的后端返回的是数据流，然后文件名是放进了content-disposition中，前端进行获取。（前端也可以自己设置文件名）这其中遇到两个问题，第一是文件名获取不到；第二是返回的数据data已经被转成了Blob无法读取错误时后端反馈的信息

不多BB，上代码和解决方法：

第一步发送请求

1 Axios.request({
2             method: 'GET', 
3             url: `${baseUrl}/order/export`,   //请求地址
4             responseType: 'blob',             //responseType ->用来设置返回值，默认是'',等同于text，数据格式的转换是浏览器处理的
5             params: data,
6             timeout: 20000,
7             withCredentials: true,
8           })

第二步当请求发送以后接收后端返回的数据。

　　无论是成功时后端返回文档流还是失败返回一个对象，都会因为responseType: ‘blob’变成一个Blob对象。当后台解析错误的时候，返回的就是正常的错误对象，包含错误码和错误信息，如果不做处理，那么错误状态和成功状态都是blob类型，无法捕获；

所以需要对返回值做特殊处理，尝试把blob转换为json格式，如果转换成功则说明返回的数据不是文档流，后台出错，反之则文档转换正常：

Axios.request({
            method: ‘GET’,
            url: `${baseUrl}/order/export`,
            responseType: ‘blob’,
            params: data,
            timeout: 20000,
            withCredentials: true,
          }).then((res) => {
　　　　　　　//判断后端解析是否成功（成功：数据为文档流继续操作。失败：拿到错误信息，提示用户）
            let data = res.data;
            let fileReader = new FileReader();
            fileReader.onload = function () {
              try {
                let jsonData = JSON.parse(this.result);
                if (jsonData.result === “2”) {
                  // 说明是普通对象数据，且返回错误类型是2，直接将错误信息给用户看
                  // to do something
                  Message.error(jsonData.msg)
                }
              } catch (err) {
                // 解析成对象失败，说明是正常的文件流
                // alert(‘ok’);
              }
            };
            fileReader.readAsText(data);
　　　　　　　
　　　　　　　 //成功继续处理后端返回的文档流数据
            const link = document.createElement(‘a’)
            let blob = new Blob([res.data], { type: ‘application/vnd.ms-excel’ });
            link.style.display = ‘none’
            link.href = URL.createObjectURL(blob);
            // link.setAttribute(‘download’, ‘用户_’ + ‘.xlsx’) 前端自己设置下载的文件名称
　　　　　　　//能获取到content-disposition信息，需要后端在后台接口中，在响应头中增加：context.Response.Headers.Add(“Access-Control-Expose-Headers”, “Content-Disposition”); 前端便能获取到
            var fileName = res.headers[‘content-disposition’].split(“;”)[1].split(“filename=”)[1];
            link.download = decodeURI(escape(fileName))
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
            this.loading = !this.loading
          }).catch(error => {
            console.log(15, error)
          })
        }
      }