echarts 图表导出到 Word

文章介绍了如何使用Java类库poi-tl版本1.10.5,配合ApachePOI4.1.2,将前端echarts图表导出到Word文档中。主要步骤包括编译模板、渲染数据和输出到流。示例中详细展示了创建条形图的过程,并强调了其他类型的图表也可以通过类似方法实现。注意poi-tl和poi的版本匹配以及图表数据必须是Number[]类型。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本篇文章主要介绍使用 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[] 类型
### Java 实现 ECharts 图表导出Word 文档 为了实现在Java项目中将ECharts图表导出Word文档的功能,可以采用多种方法和技术栈组合来完成这一目标。下面提供了一种基于Spring Boot框架下的解决方案,该方案利用了Apache POI库用于创建和操作Word文件,并通过无头浏览器(如PhantomJS或Puppeteer)获取ECharts图表的静态图像。 #### Maven依赖配置 首先,在项目的`pom.xml`文件中加入必要的Maven依赖项以支持Apache POI以及Web客户端: ```xml <dependencies> <!-- Apache POI --> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>5.2.3</version> </dependency> <!-- Selenium WebDriver for headless browser control --> <dependency> <groupId>org.seleniumhq.selenium</groupId> <artifactId>selenium-java</artifactId> <version>4.1.0</version> </dependency> <!-- ChromeDriver dependency, adjust version as needed --> <dependency> <groupId>com.github.webdriverextensions</groupId> <artifactId>webdrivermanager</artifactId> <version>5.0.0</version> </dependency> </dependencies> ``` #### Controller层处理逻辑 定义一个控制器接收前端发送过来的数据并调用服务层进行实际业务处理: ```java @RestController @RequestMapping("/export") @CrossOrigin(origins = "*") public class ExportController { private final IEchartsExportService exportService; @Autowired public ExportController(IEchartsExportService exportService){ this.exportService = exportService; } @PostMapping(value="/to-word", consumes="application/json", produces="text/plain;charset=UTF-8") public ResponseEntity<String> exportToWord(@RequestBody Map<String,Object> chartData) { try{ File wordFile = exportService.generateChartInWord(chartData); return ResponseEntity.ok().body("文件已生成:" + wordFile.getAbsolutePath()); }catch(Exception ex){ return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(ex.getMessage()); } } } ``` #### Service接口与实现类 设计服务接口及其具体实现负责核心功能——即根据传入参数构建ECharts实例并将之转换成图片形式嵌入Word文档内: ```java // 定义服务接口 public interface IEchartsExportService { File generateChartInWord(Map<String, Object> chartOptions); } @Service public class EchartsExportServiceImpl implements IEchartsExportService { @Override public File generateChartInWord(Map<String, Object> chartOptions) throws Exception { // 创建临时HTML页面存储ECharts配置信息 String htmlContent = "<!DOCTYPE html><html lang='en'><head>" + "<meta charset='UTF-8'>" + "<title>Echart Chart</title>" + "</head><body>" + "<div id='main' style='width: 600px;height:400px;'></div>" + "<script src='https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js'></script>" + "<script type='text/javascript'>var myChart = echarts.init(document.getElementById('main'));myChart.setOption("+ JSON.toJSONString(chartOptions)+");</script></body></html>"; Path tempHtmlPath = Files.createTempFile(null,".html"); Files.write(tempHtmlPath, htmlContent.getBytes()); // 使用Selenium启动Chrome无界面模式加载上述HTML资源 System.setProperty("webdriver.chrome.driver","path/to/chromedriver.exe"); WebDriver driver = new ChromeDriver(new ChromeOptions().addArguments("--headless")); driver.get(tempHtmlPath.toUri().toString()); // 获取截图作为PNG格式字节数组 byte[] screenshotBytes = ((TakesScreenshot)driver).getScreenshotAs(OutputType.BYTES); // 关闭驱动程序释放资源 driver.quit(); // 将字节流转存为本地图片文件供后续插入Word使用 BufferedImage bufferedImage = ImageIO.read(new ByteArrayInputStream(screenshotBytes)); Path imageFilePath = Files.createTempFile(null,".png"); ImageIO.write(bufferedImage, "png",imageFilePath.toFile()); // 构建XWPFDocument对象并向其中添加带有ECharts图表的内容 XWPFDocument document = new XWPFDocument(); XWPFParagraph paragraph = document.createParagraph(); XWPFPicture picture = paragraph.createPicture(imageFilePath.toString(),document.getNextPicNameNumber(PIC_TYPE_PNG)); // 设置段落样式使图表居中显示 CTP ctp = paragraph.getCTP(); CTJc ctjc = ctp.addNewPPr().isSetJc() ? ctp.getPPr().getJc() : ctp.addNewPPr().addNewJc(); ctjc.setVal(STJc.CENTER); // 输出最终形成的Word文档给用户下载 Path outputDocxPath = Files.createTempFile(null,".docx"); FileOutputStream outStream = new FileOutputStream(outputDocxPath.toFile()); document.write(outStream); outStream.close(); document.close(); return outputDocxPath.toFile(); } } ``` 此代码片段展示了如何在一个典型的Spring Boot应用程序环境中设置RESTful API端点,以便接受JSON格式化的ECharts选项并通过一系列步骤将其转化为可读取的Word (.docx) 文件[^2][^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值