首页 前端知识 echarts 图表导出到 Word

echarts 图表导出到 Word

2024-11-05 23:11:38 前端知识 前端哥 657 774 我要收藏

本篇文章主要介绍使用 poi-tl Java类库实现前端 echarts 图表导出到 Word 的详细步骤。

版本:Word:2019,poi-tl:1.10.5 ,poi:4.1.2

poi-tl 官方文档

引入依赖

注意:poi-tl 版本要和 poi 版本对应上

<dependency>
     <groupId>org.apache.poi</groupId>
     <artifactId>poi</artifactId>
     <version>4.1.2</version>
</dependency>
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi-ooxml</artifactId>
    <version>4.1.2</version>
</dependency>
<dependency>
    <groupId>org.apache.poi</groupId>
    <artifactId>poi-scratchpad</artifactId>
    <version>4.1.2</version>
</dependency>
<dependency>
    <groupId>com.deepoove</groupId>
    <artifactId>poi-tl</artifactId>
    <version>1.10.5</version>
</dependency>

实现

主要就是三个步骤:编译模板、渲染数据、输出到流。实际使用实现导出的有条形图、圆环图,堆积条形图、饼图和组合图(柱形 + 折线),熟悉了一个图表的实现流程,再参照官方文档,其他图表也很好实现。下面以实现导出条形图为例,介绍各个步骤的具体实现。

  1. 先准备一个 Word 模板,在模板中插入一个条形图。在条形图上右键,选择查看可选文字,在文本框中输入 {{chart}}chart 可以理解为图表的 ID,后面渲染数据时会用到。保存文件,格式为 .doc 或者 .docx 都可以,然后放到项目的 templates 目录下即可。

  2. 代码实现。代码不多,但是包含了实现的所有步骤。如需添加其他图表,可以参照官方文档,构建固表模型,再放入 map 中即可。

public void exportWord(HttpServletResponse response) {
    // 获取输入流
    InputStream inputStream = null;
    try {
        inputStream = new ClassPathResource("templates/template.doc").getInputStream();
    } catch (IOException e) {
        logger.error("读取Word模板失败,原因为:{}",e.getMessage());
        throw new RuntimeException(e);
    }
    // 编译word模板
    XWPFTemplate template = XWPFTemplate.compile(inputStream);
    // 获取数据(自己查询所需数据即可,这里以 dataList 为例)
    List<Data> dataList = xxxxx;
    // 构建图表模型
    ChartMultiSeriesRenderData chart = null;
    if (!CollectionUtils.isEmpty(dataList)){
        chart = Charts
            .ofMultiSeries("图表标题", dataList.stream()
                           .map(Data::getDataName)
                           .collect(Collectors.toList())
                           .toArray(new String[dataList.size()]))
            .addSeries("系列名称", dataList.stream()
                       .map(Data::getDataValue)
                       .collect(Collectors.toList())
                       .toArray(new Double[dataList.size()]))
            .create();
    }
    // 用来渲染数据的 Map,key 为模板中可选文字指定的值,value 为图表模型对象
    Map<String,Object> dataMap = new HashMap<>();
    dataMap.put("chart", chart); 
    // 渲染数据
    template.render(dataMap);
    try {
        // 输出到流
        response.setHeader(HttpHeaders.CONTENT_TYPE, "application/vnd.openxmlformats-					officedocument.wordprocessingml.document;charset=UTF-8");
        response.setHeader(HttpHeaders.CONTENT_DISPOSITION, "attachment;filename=" + fileName + ".doc");
        OutputStream outputStream = response.getOutputStream();
        template.writeAndClose(outputStream);
    } catch (Exception e){
        e.printStackTrace();
    }
}

注意

  • 多参照官方文档,按照官方文档的步骤来即可
  • poi-tl 和 poi 版本要对应,否则程序执行会报错
  • 图表系列的值只能为 Number[] 类型
转载请注明出处或者链接地址:https://www.qianduange.cn//article/20092.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!