你好,我是二哥呀,EasyExcel-Plus 正式更名为 FastExcel,并且作者正在发力推广。那作为一名同样喜欢开源的爱好者,我必须得为他们的开源精神做一点点微薄的贡献,那就是通知一声你(😄。
https://github.com/CodePhiliaX/fastexcel
要知道,FastExcel 的前身 EasyExcel 在 GitHub 上有多达 32.9k star,深受开发者的喜爱。
只不过在今年早些时候,作者从阿里离职了,阿里也因此官宣 EasyExcel 走到了生命的尽头,毕竟维护开源项目需要付出巨大的精力和时间。
看了一眼 EasyExcel 的提交记录,多达 1196 次,不容易啊。
刚好
技术派
中缺少导出 Excel 这一趴,于是我就索性亲自上阵把它实现了。
代码我已经提交到了 GitHub,Spring Boot 后端和 React 都有。你可以拉取最新的 main 分支查看,网上也有很多类似的例子,但要不只有前端,要不只有后端,没有完整的 web 示例。对于新手或者小白来说,还是不知道该怎么使用。
入口放在了技术派 admin 端的首页, PVPU 这块刚好有一个 echarts,可以下载近 7 天、30 天、90 天、180 天的历史数据。
完成这个小功能,简历上就可以写上这么一条(详细参考技术派教程):
https://paicoding.com/column/6/16
你看,简历含金量是不是瞬间就提起来了。
实现起来也非常简单。
01、后端代码实现
第一步,在需要 FastExcel 的 module 中引入依赖
。
<dependency>
<groupId>cn.idev.excelgroupId>
<artifactId>fastexcelartifactId>
<version>${fastexcel.version}version>
dependency>
按照关键字在技术派的源码中搜就可以找得到了。
第二步,在处理下载请求的 controller 中添加接口
,注意看 HttpServletResponse 返回对象都设置了哪些属性。
@GetMapping("pvUvDayDownload2Excel")
public void pvUvDayDownload2Excel(@RequestParam(name = "day", required = false) Integer day,
HttpServletResponse response) throws IOException {
response.reset();
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
response.setCharacterEncoding("utf-8");
String fileName = URLEncoder.encode("技术派", "UTF-8").replaceAll("\\+", "%20");
response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");
// 获取数据
day = (day == null || day == 0) ? DEFAULT_DAY : day;
statisticsSettingService.download2Excel(day, response);
}
①、
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")
:设置响应的内容类型为 Excel 文件的 MIME 类型。
②、
response.setCharacterEncoding("utf-8");
:设置响应的字符编码为 UTF-8。
③、
String fileName = URLEncoder.encode("技术派", "UTF-8").replaceAll("\\+", "%20");
:对文件名进行 URL 编码,并将加号替换为 %20,以确保文件名在 URL 中正确显示。
④、
response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");
:设置响应头,指示浏览器以附件形式下载文件,并指定文件名。
第三步,调用 FastExcel 的 API 实现 Excel 文件的写入
。
public void download2Excel(Integer day, HttpServletResponse response) {
List pvDayList = requestCountService.getPvUvDayList(day);
// StatisticsDayDTO 转 StatisticsDayExcelDTO
List excelDTOList = StatisticsConverter.convertToExcelDTOList(pvDayList);
// TODO 这里可以用一个大文件,比如说 500万条数据测试一下,看看 FastExcel 的性能
try {
FastExcel.write(response.getOutputStream(), StatisticsDayExcelDTO.class)
.sheet(day + "天统计")
.doWrite(excelDTOList);
} catch (IOException e) {
throw new RuntimeException(e);
}
}
FastExcel.write 方法接受输出流和数据类型,sheet 方法设置工作表名称,doWrite 方法将数据写入工作表。
注意这里的 StatisticsDayExcelDTO 为数据类型,也就是 Excel 中的列。只需要使用注解
@ExcelProperty
指定一下列名就好了。
@Data
public class StatisticsDayExcelDTO {
@ExcelProperty("日期")
private String date;
@ExcelProperty("PV")
private Long pvCount;
@ExcelProperty("UV")
private Long uvCount;
}
到此为止,后端的工作就完成了,接下来,我们来看前端的代码怎么写。
02、前端代码实现
第一步,先封装 Axios 的 get 请求
。
get(url: string, config: AxiosRequestConfig = {}): Promise> {
console.log("开始执行 get 请求", url, config);
return this.service.get(url, config);
}
Axios 是一个基于 promise(一个由异步函数返回的对象)的网络请求库,封装了 XMLHttpRequests,可以将将请求体序列化为JSON、FormData、x-www-form-urlencoded,同时兼容 Blob 格式。
get 方法接受两个参数:url 和 config。url 是一个字符串,表示请求的目标地址;config 是一个可选的配置对象,默认值为空对象,用于配置请求的详细信息。
函数的返回类型是一个 Promise,其中包含了
ResultData
类型的数据。T 是一个泛型参数。