java背景擷取echarts圖檔
-
- 使用場景
- Selenium
- ChromeDriver
- 準備一個html
- 背景代碼
- 效果
-
- 在linux伺服器部署時出現exited abnormally錯誤
使用場景
最近項目中需要将頁面中展示的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");