专栏名称: 沉默王二
技术文通俗易懂,吹水文风趣幽默。学 Java,认准二哥的网站 javabetter.cn
目录
相关文章推荐
51好读  ›  专栏  ›  沉默王二

被阿里抛弃的那个项目,救活了!

沉默王二  · 公众号  · 后端  · 2024-12-20 14:04

主要观点总结

本文主要介绍了作者如何将EasyExcel-Plus更名为FastExcel,并介绍了使用FastExcel实现Excel文件导出的前后端代码实现过程,包括接口设计、数据模型设计、Axios的使用、自定义图标的添加以及对服务端返回数据的处理等。同时,还提到了使用Apifox进行接口测试以及模拟500万条数据导出Excel的相关内容。

关键观点总结

关键观点1: FastExcel的简介和更名背景

作者介绍了EasyExcel-Plus更名为FastExcel的缘由,并强调了开源精神的重要性。

关键观点2: 后端代码实现

详细描述了后端代码实现的步骤,包括引入FastExcel依赖、添加接口、设置响应类型和数据处理等。

关键观点3: 前端代码实现

介绍了前端代码的封装过程,包括Axios的get请求、响应类型的设置、自定义图标的添加以及对服务端返回数据的处理等。

关键观点4: 使用Apifox进行接口测试

介绍了如何在开发过程中使用Apifox插件进行接口测试,提高开发效率。

关键观点5: 模拟大数据量导出Excel的挑战和解决方案

作者提到了模拟500万条数据导出Excel的挑战,并给出了相应的解决方案,包括如何插入批量数据、保证MySQL连接不断开、使用CountDownLatch和自定义线程池写入Excel等。


正文

你好,我是二哥呀,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 是一个泛型参数。







请到「今天看啥」查看全文