Java 后台获取echarts图片

最新推荐文章于 2024-08-18 07:15:00 发布

Mr . zhang

最新推荐文章于 2024-08-18 07:15:00 发布

阅读量2.6k

点赞数 2

分类专栏： SpringBoot 文章标签： springboot selenium chromeDriver

本文链接：https://blog.csdn.net/u012441594/article/details/89284667

版权

SpringBoot 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

java后台获取echarts图片

使用场景

最近项目中需要将页面中展示的echarts折线图保存到word中生成简报

使用的是Selenium 与 ChromeDriver(这里就不说明了,大家自行百度)

Selenium

compile group: 'org.seleniumhq.selenium', name: 'selenium-java', version: '3.7.1'

ChromeDriver

ChromeDriver下载链接
ps:这里注意一下,下载的版本一定要和你本地安装的chrome版本对应
对照表

我用的:Google Chrome版本 73.0.3683.103（正式版本）
下载的ChromeDriver 是73.0.3683.68

下载完之后,我这里是放到D:\chromedriver\chromedriver.exe这个路径下
在这里插入图片描述

准备一个html

<html>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<head>
    <script src="http://gssn.fw121.com/js/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.8.0/echarts.min.js"></script>
</head>
<body>
<!-- 因为我需要生成两个图片 所以定义了两个echarts -->
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM  -->
<div id="temEcharts" style="height:400px;width:550px"></div>
<div id="rhEcharts" style="height:400px;width:550px"></div>
</body>
<script>
    var rhEcharts = null;
    $(function () {
        // 基于准备好的dom，初始化echarts实例
        rhEcharts = echarts.init(document.getElementById('rhEcharts'));
    });
    function showImg(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'
//            }]
//        };
//        rhEcharts.setOption(option);
        rhEcharts.setOption(data);
    }

    function returnEchartImg() {
        var url = rhEcharts.getDataURL();
        //清空绘画内容，清空后实例可用
        rhEcharts.clear();
        return url;
    }


</script>
</html>

后台代码


public class WebDriverUtil {


    private static BASE64Decoder decoder = new sun.misc.BASE64Decoder();



    public static void main(String []s){
        getImgByte("{     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'     }] }");
    }

    /**
     * 获取图片byte
     */
    public static byte[] getImgByte(String option) {
        WebDriver driver = null;
        try {
            driver = getWebDriver();
            //访问网址
            String osName = System.getProperties().getProperty("os.name");
            if (osName.equals("Linux")) {
                driver.get("file:///usr/local/project/test/api/html/zhixiantu.html");
            } else {
                Resource resource = new ClassPathResource("html/zhixiantu.html");
                driver.get(resource.getFile().getPath());
            }
            System.out.println(driver.getCurrentUrl());
            JavascriptExecutor js = (JavascriptExecutor) driver;
            js.executeScript("showImg(" + option + ")");
            //延迟1秒等待折线图绘制完成
            Thread.sleep(1000);
            String imgTxt = js.executeScript("return returnEchartImg()").toString().replace("data:image/png;base64,", "");
            System.out.println("----------------" + imgTxt);
            base64StringToImage(imgTxt);
            return decoder.decodeBuffer(imgTxt);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            driver.close();
            driver.quit();
        }
        return null;
    }


    /**
     * 初始化WebDriver
     *
     * @return
     */
    public static WebDriver getWebDriver() {
        // 设置ChromeDriver的路径加载驱动
        System.setProperty("webdriver.chrome.driver", "D:\\chromedriver\\chromedriver.exe");
        //设置 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");
        //启动一个 chrome 实例
        return new ChromeDriver(chromeOptions);
    }


    /**
     * 保存图片
     *
     * @param base64String
     */
    public static void base64StringToImage(String base64String) {
        try {
            byte[] bytes1 = decoder.decodeBuffer(base64String);
            ByteArrayInputStream bais = new ByteArrayInputStream(bytes1);
            BufferedImage bi1 = ImageIO.read(bais);
            File file= new File("d://123345457.jpg");
            ImageIO.write(bi1, "jpg", file);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

效果

运行main方法控制台输出
生成的图片

在linux服务器部署时出现exited abnormally错误

在这里插入图片描述
解决方法:

        //linux 下让Chrome在root权限下跑
        chromeOptions.addArguments("--no-sandbox");