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的“另存为”对话框
    // 内容样式
	HorizontalCellStyleStrategy horizontalCellStyleStrategy = ContentStyle.getContentStyle();
	
    //将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. 前端

4.1 简单粗暴下载法

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

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

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

4.2 Axios下载法 2021/7/1更新

第二次做这个需求，重新研究了一下，用axios是可以实现的，还可以传对象，就很棒，感觉比上面那种方式要好。上代码：

//将当前页数据导出为Excel
exportExcel(){
    axios({
        method: 'post',
        url: '/xxxx/exportExcel',
        responseType: 'blob', //设置返回信息为二进制文件，默认为json
        data: this.tableInfo, //后台照常用@RequestBody接收即可
    }).then(res => {
        // debugger;
        let blob = new Blob([res], { type: 'application/xlsx' });
        let url = window.URL.createObjectURL(blob);
        const link = document.createElement('a'); //创建a标签
        link.href = url;
        link.download = '通用订单信息.xlsx'; //重命名文件
        link.click();
        URL.revokeObjectURL(url);
    });
},

5.前端样式

// 内容样式
HorizontalCellStyleStrategy horizontalCellStyleStrategy = ContentStyle.getContentStyle();

package com.xxx.xxx.mes.xxx.util;

import com.alibaba.excel.write.metadata.style.WriteCellStyle;
import com.alibaba.excel.write.style.HorizontalCellStyleStrategy;
import org.apache.poi.ss.usermodel.BorderStyle;
import org.apache.poi.ss.usermodel.HorizontalAlignment;
import org.apache.poi.ss.usermodel.VerticalAlignment;

/**
 * @author 27号白开水
 * @date 2021/6/10 16:55
 */
public class ContentStyle {
    //设置excel内容格式
    public static HorizontalCellStyleStrategy getContentStyle(){
        //内容策略
        WriteCellStyle contentWriteCellStyle = new WriteCellStyle();
        //设置样式
        contentWriteCellStyle.setBorderBottom(BorderStyle.THIN);//设置底边框;
        contentWriteCellStyle.setBottomBorderColor((short) 0);//设置底边框颜色;
        contentWriteCellStyle.setBorderLeft(BorderStyle.THIN);  //设置左边框;
        contentWriteCellStyle.setLeftBorderColor((short) 0);//设置左边框颜色;
        contentWriteCellStyle.setBorderRight(BorderStyle.THIN);//设置右边框;
        contentWriteCellStyle.setRightBorderColor((short) 0);//设置右边框颜色;
        contentWriteCellStyle.setBorderTop(BorderStyle.THIN);//设置顶边框;
        contentWriteCellStyle.setTopBorderColor((short) 0); ///设置顶边框颜色;

        contentWriteCellStyle.setWrapped(true); //设置自动换行;
        contentWriteCellStyle.setHorizontalAlignment(HorizontalAlignment.CENTER);// 水平居中
        contentWriteCellStyle.setVerticalAlignment(VerticalAlignment.CENTER);// 垂直居中

        HorizontalCellStyleStrategy horizontalCellStyleStrategy =
                new HorizontalCellStyleStrategy(contentWriteCellStyle, contentWriteCellStyle);

        return horizontalCellStyleStrategy;
    }
}

6. 常见问题

踩坑：easyExcel导出文件，部分字段为空

7. 参考链接

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

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

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