Java+Selenium+Chrome实现后台加载Echarts并返回base64_java chromedriver 后台渲染

作者：Monodyee | 2024-05-30 05:25:39

踩

java chromedriver 后台渲染

一、资源准备

1、引入selenium-java

2、下载ChromeDriver

二、编写代码

1、准备一个html模板文件，用于加载Echarts并返回Echarts图片

一、资源准备

1、引入selenium-java


<dependency>
    <groupId>org.seleniumhq.selenium</groupId>
    <artifactId>selenium-java</artifactId>
    <version>3.141.59</version>
</dependency>

2、下载ChromeDriver

ChromeDriver下载版本需与本机Chrome浏览器版本对应，有对应的Windows、Mac、Linux版本

ChromeDriver下载地址1 ChromeDriver下载地址2

tips：Chrome 70版本以后ChromeDriver对应的版本和Chrome版本对应，下载对应版本即可，70之前可参考 29~66版本对应关系表

二、编写代码

1、准备一个html模板文件，用于加载Echarts并返回Echarts图片


<html>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
 
<head>
    <script src="jquery-1.8.2.min.js"></script>
    <script src="echarts.js"></script>
</head>
 
<body>
    <!--准备一个DOM-->
    <div id="echartsDemo" style="height:500px;width:500px"></div>
</body>
<script>
    var echartsDemo= null;
    $(function () {
        // 基于准备好的dom，初始化echarts实例
        echartsDemo= echarts.init(document.getElementById('echartsDemo'));
    });
    function loadEcharts(data) {
        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };
        option && echartsDemo.setOption(option);
        // 传入参数时使用data
        // echartsDemo.setOption(data);
 
    }
 
    function returnEchartImg() {
        var url = echartsDemo.getDataURL();
        //获取到Echarts图片之后将实例清空
        echartsDemo.clear();
        return url;
    }
 
 
</script>
 
</html>

2、准备加载工具类

Tips：

1、此处 getEchartsPic() 加锁是因为在使用同一个WebDriver时，使用多线程执行时可能会导致线程不安全问题。

2、WebDriver可设置成单例模式，根据需求场景设置即可，也可设置成对象资源池。


/**
 * chromeDriver.exe驱动位置
 */
private static String CHROME_DRIVER_URL;
 
/**
 * 模板位置
 */
private static String TEMPLATE_URL;
 
//从配置中获取参数值
//tips：类上记得加@Component注解
@Value("${selenium.chromedriver.url}")
public  void setChromeDriverUrl(String chromeDriverUrl) {
    CHROME_DRIVER_URL = chromeDriverUrl;
}
 
@Value("${selenium.template.url}")
public  void setTemplateUrl(String templateUrl) {
    TEMPLATE_URL = templateUrl;
}
 
/**
 * 初始化ChromeDriver对象
 */
public static void initWebDriver(){
    driver = getWebDriver();
}
 
/**
 * 获取图片byte
 */
//加锁
public synchronized static String getEchartsPic(String option) {
    try {
        //driver = getWebDriver();
        if (driver == null || driver.toString().contains("(null)")){
            throw new NullPointerException("WebDriver已关闭，请初始化WebDriver");
        }
        if (logger.isDebugEnabled()) {
                logger.debug("当前系统环境为：" + System.getProperties().getProperty("os.name"));
            }
        //Resource resource = new ClassPathResource("html/fxm.html");
        //driver.get(resource.getFile().getPath());
        //访问html，拿到html资源
        driver.get(TEMPLATE_URL);
 
        if (logger.isDebugEnabled()) {
            logger.debug("当前driver获取到的html资源url：" + driver.getCurrentUrl());
        }
        //执行html，开始渲染Echarts
        JavascriptExecutor js = (JavascriptExecutor) driver;
        js.executeScript("loadEcharts(" + option + ")");
 
        //延迟1秒等待echarts图绘制完成
        //此处可不等待，将Echarts参数中加入animation:false停止动画即可
        //Thread.sleep(50);
        String imgBase64 = js.executeScript("return returnEchartImg()").toString().replace("data:image/png;base64,", "");
        if (logger.isDebugEnabled()) {
            logger.debug("当前获取到的图片base64：" + imgBase64);
        }
        return imgBase64;
    } catch (Exception e) {
        e.printStackTrace();
    }finally {
        //此处因场景需要多次执行，将driver实例提供到外层关闭和初始化
        //driver.close();
        //driver.quit();
    }
    return null;
}
 
 
/**
 * 初始化WebDriver
 *
 * @return
 */
public static WebDriver getWebDriver() {
    // 设置ChromeDriver的路径加载驱动
    System.setProperty("webdriver.chrome.driver", CHROME_DRIVER_URL);
    //设置 chrome 的无头模式
    ChromeOptions chromeOptions = new ChromeOptions();
    //无头模式
    chromeOptions.setHeadless(true);
    //地址出现data:,
    //chromeOptions.addArguments("--user-data-dir=C:/Users/Administrator/AppData/Local/Google/Chrome/User Data/Default");
    //Chrome正在受到显示自动软件的控制  不提示语
    chromeOptions.addArguments("disable-infobars");
    //禁用gpu加速，没有gpu运行时会报错，但是并不会影响chrome正常运行
    chromeOptions.addArguments("--disable-gpu");
    //linux版本需要禁用沙盒，linux 下让Chrome在root权限下跑
    chromeOptions.addArguments("--no-sandbox");
    //启动一个 chrome 实例
    return new ChromeDriver(chromeOptions);
}

三、测试


EchartsToPicUtil.initWebDriver();
String base64 = EchartsToPicUtil.getEcharsPic(" {\n" +
                "  tooltip: {\n" +
                "    trigger: 'axis',\n" +
                "    axisPointer: {\n" +
                "      type: 'shadow'\n" +
                "    }\n" +
                "  },\n" +
                "  grid: {\n" +
                "    left: '3%',\n" +
                "    right: '4%',\n" +
                "    bottom: '3%',\n" +
                "    containLabel: true\n" +
                "  },\n" +
                "  xAxis: [\n" +
                "    {\n" +
                "      type: 'category',\n" +
                "      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n" +
                "      axisTick: {\n" +
                "        alignWithLabel: true\n" +
                "      }\n" +
                "    }\n" +
                "  ],\n" +
                "  yAxis: [\n" +
                "    {\n" +
                "      type: 'value'\n" +
                "    }\n" +
                "  ],\n" +
                "  series: [\n" +
                "    {\n" +
                "      name: 'Direct',\n" +
                "      type: 'bar',\n" +
                "      barWidth: '60%',\n" +
                "      data: [10, 52, 200, 334, 390, 330, 220]\n" +
                "    }\n" +
                "  ]\n" +
                "}");
 
System.out.println(base64);
WebDriver driver = EchartsToPicUtil.getWebDriverInstance();
driver.close();
driver.quit();

执行成功

四、总结

1、使用场景：在java后台加载Echarts并拿到渲染后的Echarts图后用于生成Word。拿到Base64即可。

2、衍生：该场景只是Selenium+Chrome的使用之一，具体使用自行查阅。

五、问题

1、echarts.getDataUrl()方法默认返回png格式图片，在替换时需修改对应格式，否则会导致颜色加载问题。

2、linux环境启动需禁用沙盒

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/645441