EasyExcel + Vue +Springboot 前后端联动，快捷导出Excel文件

预期效果：前后台联动，即点击“导出Excel”按钮后弹出下载框

导出效果：

1. 引入依赖

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

2. 创建实体类

@Data
public class WeekProPlanExcel implements Serializable {
    @ExcelProperty("MES计划号") //这是列名
    private String MESPlanNo;
    @ExcelProperty("周一")
    private int monCount;
    @ExcelProperty("周二")
    private int tueCount;
    @ExcelProperty("周三")
    private int wedCount;
    @ExcelProperty("周四")
    private int thuCount;
    @ExcelProperty("周五")
    private int friCount;

    @ExcelIgnore //导出时会忽略该字段
    private String weekProPlanNo;
}

3. 后台导出

在这里想要一个前后台联动，即点击“导出”按钮后弹出下载框的效果，而不是单纯写入到固定位置。
有几个地方跟官网方法有区别，需要特别注意一下。

/*导出周计划*/
@RequestMapping("/exportExcel")
@ResponseBody
public void exportExcel(String weekProPlanNo, HttpServletResponse response) throws Exception{
    //文件名含中文需要转码
    String fileName = 
    	URLEncoder.encode(weekProPlanNo + "周计划.xlsx", StandardCharsets.UTF_8.toString());
   	//将需要导出的数据从数据库中查出
    List<WeekProPlanExcel> list = weekProPlanService.getThisWeekExcelInfo(weekProPlanNo);
    //设置响应格式
    response.setContentType("application/vnd.ms-excel;chartset=utf-8"); //文件扩展名为excel格式
    response.setHeader("Content-Disposition", "attachment;filename=" + fileName); //触发文件名为filename的“另存为”对话框
    //将OutputStream对象附着到EasyExcel的ExcelWriter实例
    EasyExcel.write(response.getOutputStream(), WeekProPlanExcel.class) //（输出流， 文件头）
            .excelType(ExcelTypeEnum.XLSX)
            .autoCloseStream(true)
            .sheet("第" + weekNo + "周") //第一个sheet的名
            .doWrite(list); //写入数据
    //在这里如果有自定义的动态头时，会有些许不同。刚开始不太熟悉，我没注意这点，结果就被bug摩擦了
    //EasyExcel.write(response.getOutputStream(), WeekProPlanExcel.class)
    //应改为
    //EasyExcel.write(response.getOutputStream()).head(head()) 
    //其中head()是自定义的方法，详见官网 https://www.yuque.com/easyexcel/doc/write#b4b9de00
}

4. 前端

前端找了很多方法，很多人写得前端代码还挺长的，但是用了用都不大行，成功导出后会报格式错误，然后就打不开。后来看了文章末尾链接大佬的思路，真就特么大道至简/(ㄒoㄒ)/~~。
不能直接使用axios直接调用，会报错，需要使用window.localtion调用。
大佬的代码是这样的：

我的项目进行了封装，没法直接通过axios.defaults.baseURL取到默认地址，所以使用了简单粗暴的方式：

//导出Excel数据
exportExcel(){
    window.location =  
        'http://localhost:8081/WeekProPlan/exportExcel?weekProPlanNo=' 
        + this.weekProPlanNo;
}

5. 参考链接

https://blog.csdn.net/wating_you/article/details/111238955
https://www.cnblogs.com/throwable/p/13656224.html

一个简单的Excel导出就做好啦，如果需要更加细致的优化的话，可以在此基础上参考官网教程。

如果对您有帮助，就点个赞吧~