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

版本：Word：2019，poi-tl：1.10.5 ，poi：4.1.2

poi-tl 文档地址：http://deepoove.com/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>

实现

主要就是三个步骤：编译模板、渲染数据、输出到流。我以条形图为例，介绍各个步骤的实现细节。我自己实现导出的有条形图、圆环图，堆积条形图、饼图和组合图（柱形 + 折线），熟悉了一个图表的实现流程，再参照官方文档，其他图表也很好实现。

先准备一个 Word 模板，在模板中插入一个条形图。在条形图上右键，选择查看可选文字，在文本框中输入 {{chart}}，chart 可以理解为图表的 ID，后面渲染数据时会用到。保存文件，格式为 .doc 或者 .docx 都可以，然后放到项目 templates 目录下即可。
代码实现。代码中包含了实现的所有步骤。如需添加其他图表，只需要添加构建图表模型的代码，再放入 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<String,Object> dataMap = new HashMap<>();dataMap.put("chart", chart); // key 模板中可选文字指定的值，value 是图表模型对象// 渲染数据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[] 类型

echarts 图表导出到 Word相关推荐

开发一个导出功能，将echarts图表导出到excel文件中
首先,做这个功能开发时,首先有几点必须弄清楚:1.echarts图表导出时该怎样导出到excel中,2.有没有图表自带的导出功能可用.经过我上网查阅相关资料以及去echarts官网查看API后,发现图 ...
echarts 图表导出PDF(带滚动条)/图片导出PDF
echarts 图表导出PDF[带滚动条]/图片导出PDF 效果展示提出问题思考问题解决问题导出PDF 里面的页头中文乱码问题参数说明效果展示提出问题在开发过程中,有需求是将展示出来的 ...
echarts图表导出为pdf
import html2canvas from 'html2canvas' import JsPDF from 'jspdf'// id -> 放echarts图表的节点id // fileNa ...
ECharts 图表导出
Echarts图形是由Javascript亲自在前端网页上绘制的 1.用ECharts配置项手册中的toolbox.feature.saveAsImage toolbox: {show: true,f ...
wordExport导出word时关于echarts图表生成图片的解决方案
一.基本介绍 wordExport是一款基于前端处理生成word的处理方式在对应页面引入FileSaver.js和jquery.wordexport.js 使用:需生成word的部分.wordExp ...
js将html转为word文档,js将html导出到word文档（含echarts图表）
需求在开发项目途中遇到了一个需求,就是将一个整个HTML界面导出到word文档,其中包含了echarts图表,经过一番折腾,终于完成了~~~(鸡肋),过程中用到了几个插件,总结了一下几个步骤,希望可 ...
前端报表导出成word文档（含echarts图表）
前端报表导出成word文档(含echarts图表) 一.问题背景: 前端vue做的各种维度的报表,原来是通过前端整体截屏导出成PDF,但部分报表在遇到跨页时会被截断,客户体验极差.然后又考虑客户可能需 ...
springboot 使用ftl模板导出echarts图表到word
最近有个需求是导出一个报表页面,包括页面的echarts图表以及一些分析说明,导出的文件是word文件.记录下做法 1.先定义好一个word静态模板模板中的动态数据用一个变量来替代,图片部分随便用一 ...
vue+docxtemplater实现读取word文档，根据后端数据生成echarts图表插入word，并下载为docx格式文件
一.需求 word自带的图表不能满足需求,并且编写过程繁琐,需要写一个页面,主要功能是能读取服务器的word模板,根据后台给的数据,自动生成echarts图表并插入到word指定位置,然后点击能下载插 ...

echarts 图表导出到 Word

引入依赖

实现

注意

echarts 图表导出到 Word相关推荐

最新文章

热门文章