SpringBoot+Vue使用easypol出现无法导出Excel表的问题

1.异常信息

今天在使用easypol导出Excel表的时候,发现能够从后端接口返回数据但是就是无法导出Excel,控制台输出devicepolicies:1 Uncaught (in promise) error,并且前端还会出现空的错误提示信息,如下图所示。

2.原因

前端Vue的axios是经过封装的在请求封装里面respone拦截器获取数据都是通过response.data获取并且判断逻辑都是判断response的code是否为200如果是200就返回response.data,如果不为200就输出错误信息由于后端导出接口并没有使用封装的统一返回对象,所以code不为200,弹出空的错误提示框,接着该请求就被拦截了Promise.reject(‘error’)。

备注,前面图片中的response.data并不为undefine,而是Blob

• 之所以response.data为blob类型,是因为前端aiox请求中设置了responseType为blob

• 后端导出接口并没有使用封装的统一返回对象

3.解决办法

搞清楚原因后就好办了,我们知道后端返回的是Excel表的信息所以在头部信息中存在content-Type=application/vnd.ms-excel所以我们可以先判断该次请求是否为导出Excel,如果为导出excel就把数据返回即可。

• 头部存在content-Type=application/vnd.ms-excel是因为ExcelUtil工具类中导出excel的操作中向头部写入了该信息(没有的话可以自己写入)。

• 前端通过response.data就能够获取blob类型的excel数据

4.详细的SpringBoot+easypol前后端分离实现excel导出的步骤

详细教程请参照我的这篇博文:SpringBoot+easypol前后端分离实现excel导出(保姆级教程)