EasyExcel + Vue +Springboot 前后端联动,快捷导出Excel文件
预期效果:前后台联动,即点击“导出Excel”按钮后弹出下载框导出效果:1. 引入依赖<dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.1.6</version></dependency
·
预期效果
前后台联动,即点击“导出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. 常见问题
7. 参考链接
https://blog.csdn.net/wating_you/article/details/111238955
https://www.cnblogs.com/throwable/p/13656224.html
一个简单的Excel导出就做好啦,如果需要更加细致的优化的话,可以在此基础上参考官网教程。
如果对您有帮助,就点个赞吧~
更多推荐
已为社区贡献2条内容
所有评论(0)