phantomjs实现截图

准备阶段

下载phantomjs

PhantomJS API

参考EChartsConvert

浏览器查看base64编码图片方法

echarts官网

java后端使用freemarker生成echarts图表word

流程简要说明

1.下载phantomjs

2.配置phantomjs环境变量,或者将二进制可执行文件上传至java工程的resources目录下

3.echarts官网上找到需要用到的图表下载其示例,上传至resources目录下, 修改其内容并使用freemarker模板语法替换其中数据形成图表生成模板

4.程序中使用模板绑定动态数据生成最终html文件

5.程序中生成phantomjs使用的图片截图脚本

6.java代码中使用phantomjs + 脚本 打开生成的html文件，生成图片或者base64编码的图片

7.hutool工具包将base64编码的图片数据转换成为java图片

8.使用poi-tl生成word文档或者发送至企业微信使用这个图片

9.删除生成的中间文件

"use strict";
var system = require('system');
var address;
// phantomjs.exe test.js file:///D:/jtzl-myworkspace/env/phantomjs_echarts/phantomjs-2.1.1-windows/bin/pie-simple.html
// file:///root/index.html
if (system.args.length == 1) {
    console.log("err >>> place input URI");
    phantom.exit();
} else {
    address = system.args[1];
    var page = require("webpage").create();
// 设置phantomjs打开页面的视角窗口大小
    page.viewportSize = {width: 1920, height: 1040};
// 设置截图区域，不设置就是一个视角窗口那么大
// page.clipRect = {top: 0,left: 0,width: 1000,height: 500};
// 打开使用freemarker生成的echarts.html文件
    page.open(address, function () {
        // 等待页面完全加载以后开始截图
        window.setTimeout(function () {
            // 截图
            // page.render('echarts.png');
            // 生成base64编码的截图
            console.log(page.renderBase64('png'));
            // 打印html文件内容
            // console.log(page.content);
            // 释放页面内存
            page.close()
            // 退出phantomjs工具
            phantom.exit();
        }, 1000);
    });
}

测试：

import cn.hutool.core.util.RuntimeUtil;

/**
 * @author JHL
 * @version 1.0
 * @date 2022/8/24 16:12
 * @since : JDK 11
 */
public class T {

    public static void main(String[] args) {
        String base64Data = RuntimeUtil.execForStr("D:\\jtzl-myworkspace\\env\\phantomjs_echarts\\phantomjs-2.1.1-windows\\bin\\phantomjs.exe D:\\jtzl-myworkspace\\env\\phantomjs_echarts\\phantomjs-2.1.1-windows\\bin\\test.js");
        String res = "data:image/png;base64," + base64Data;
        System.out.println(res);
    }
}

js参考文章：https://blog.51cto.com/u_9597987/3486532