使用场景
最近项目中需要将页面中展示的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 temEcharts = null;
var rhEcharts = null;
$(function () {
// 基于准备好的dom，初始化echarts实例
temEcharts = echarts.init(document.getElementById('temEcharts'));
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(echartObj) {
return echartObj.getDataURL();
}
</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();
//访问网址
driver.get("F:\\ideaWorkspaseGit\\fw-wealth-api\\src\\main\\resources\\html\\zhixiantu.html");
//页面加载时的超时时间
System.out.println(driver.getCurrentUrl());
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("showImg(" + option + ")");
//延迟1秒等待折线图绘制完成
Thread.sleep(1000);
String imgTxt = js.executeScript("return returnEchartImg(rhEcharts)").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方法控制台输出
生成的图片