SpringBoot后端+Vue之AntDesignVue前端实现查询表格导出excel功能

唉，采坑记一路心酸...废话不多说直接上图上代码

用的是阿里的com.alibaba.excel包，pom的依赖如下

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>easyexcel</artifactId>
    <version>2.1.6</version>
</dependency>

涉及到前后端跨域问题看的是这篇大佬的博文https://blog.csdn.net/qq_43486273/article/details/83272500

先上在postMan中，原本的查询效果以及导出功能的查询效果

 

 

前端的界面:

 

 在mapper层，导出的sql语句与原本的查询语句一致，只不过去掉了limit的分页条件sql语句,xml我就不截图了，可以看到导出的dao方法跟想导出的原查询功能除了方法名跟少了分页参数，其余一致。实体类一致

service层做简单的调用dao接口，这里为了未来的可拓展和安全考虑，用的是对外的request实体类做的接收，平时自己做着玩的不需要多此一举，直接return dao层的接口就行了 

 

接下来是具体处理业务逻辑层，我这里是个人习惯建了多一层命名为biz层

 登录用的是cookie，这一段是做cookie的一些操作，可以略过不看，与导出excel无关

因为原本的查询结果里，有LocalDateTime的时间类型，直接BeanCopy到为导出excel创建的bean会报错无法解析这个类型，于是做了转化为String的操作。这里的xxxReportBean是专门为了导出excel而创建的bean，里面的属性名跟类型与原查询条件的实体类属性名一致，只是时间类型的字段换成了String类型。ExcelUtils这个方法类下面会放图

 

 

ExcelUtils.createxxxxx....

这里可以看到会给httpServletResponse增加headers，可以在前端浏览器的控制台里的网络那里，看到response会有我指的'filename'这一值，不过需要在处理跨域的工具配置类上加多一条，下面会放图，跨域处理的在开头的大佬博文连接有指导

对应的为了导出excel的实体类Bean，加上@ExcelProperty，index从0开始，value是在excel表中显示的值

 

跨域headers:

如果不加的话可能前端到时拿不到headers，尽管在response那里能看见有filename，但是console.log是没有的...不给用

controller:

@ApiOperation是swagg用的，与导出excel功能无关，可以忽略

 

前端:

criteria是后端传过来的数据，具体是什么可以看文章开头PostMan的测试结果

 

 exportExcel方法:

 

 效果图:

想看headers有没有就在前端代码console.log一下就知道了

 

excel效果: