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类型,无法捕获;

                          Vue中导出Excel表格方法_第1张图片

 

          所以需要对返回值做特殊处理,尝试把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)
          })
        }
      }

 

 

  在Vue中实现Excel文件导出大体如此,希望可以帮助到你哈。有不正之处,留言指点

 

      参考博客:https://blog.csdn.net/dongguan_123/article/details/100183284

        https://www.cnblogs.com/nanamiao/p/9407576.html

        https://blog.csdn.net/lianwenxiu/article/details/94573394

        https://www.jb51.net/article/156534.htm

你可能感兴趣的:(Vue中导出Excel表格方法)