[Ext JS 4]后台自动产生图档

前言

[Ext JS 4] 实战之将chart导出为png, jpg 格式的文件

承接上一篇， 我们可以做到在Browser端打开一个Chart,并导出为png或是jpg 等格式的图档。但实际的需求会更高级， 希望可以自动产生图档， 并发送email .
对报表的需求从主动获取到被动接受， 系统要做得更智能。 需要解决的技术问题：
如果在不打开浏览器或是模拟浏览器的状况下产生svg 的代码， 在使用上一篇的技术实现图档？

不打开Browser 获取 SVG 代码段

Ext JS 使用的是浏览器前端的SVG技术来呈现图档， 不使用浏览器就能获取SVG代码段， 目前还没有什么好的解法。

模拟Browser获取SVG代码

既然不打开Browser要获取SVG不可能， 或是难度很大， 是否可以模拟浏览器打开， 产生HTML以及SVG代码段，再产生图档呢？
正好之前使用过Selenium 用来自动化前端测试， 调研了一下， 果然可以.
实现步骤：
1. 下载Selenium Client & WebDriver Language Bindings http://docs.seleniumhq.org/download/
因为这边使用的是Java 来开发， 所以下载java版的。
这个API 可以用来与WebDriver 交互， 打开一个Browser的窗口， 访问给定的地址， 返回对应的html

2. 下载WebDriver
这里使用的是Chrome 浏览器， 所以下载Chrome 的WebDriver
下载地址： http://chromedriver.storage.googleapis.com/index.html
选择合适的版本， 
解压后把  chromedriver.exe，放入google 的安装目录 。
（一般位于：
C:\Program Files (x86)\Google\Chrome\Application）

3. 代码准备好之后就是代码呼叫了；
直接上代码
import java.util.Iterator;
import java.util.Map;
import java.util.Map.Entry;
import java.util.concurrent.TimeUnit;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class DashHTMLDriverProcessor {

/**
*
* @param chromeDriverUrl
* @param chartUrl
* @param idDivMap
* {"9011-panel","9011-div"}
*
* @return {
* "image":{
* "ContentID":["image1","image2","image3"],
* "image1":"../image1.png";,
* "image2":"../image2.png";,
* "image3":"../image3.png";
* }
* }
*/
public JSONObject getImageUrlObj(String chromeDriverUrl, String chartUrl, Map<String, String> idDivMap) {
JSONObject imageUrlObj = null;
if (chromeDriverUrl != null && chartUrl != null && idDivMap != null) {
JSONObject imageObj = new JSONObject();
JSONArray contentArray = new JSONArray();

System.getProperties().setProperty("webdriver.chrome.driver", chromeDriverUrl);
WebDriver webDriver = new ChromeDriver();
webDriver.get(chartUrl);
webDriver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

@SuppressWarnings("rawtypes")
Iterator it = idDivMap.entrySet().iterator();
while (it.hasNext()) {
@SuppressWarnings("unchecked")
Entry<String, String> entry = (Entry<String, String>) it.next();
String chartId = entry.getKey();
String divId = entry.getValue();
WebElement webElement = webDriver.findElement(By.id(divId));
WebElement svgElement = webElement.findElement(By.xpath(".//*[name()='svg']"));

// String htmlstr = webElement.toString();
// String htmlstr = webElement.getAttribute("innerHTML");
String htmlstr = svgElement.getAttribute("outerHTML");
contentArray.add(chartId);
imageObj.put(chartId, htmlstr);
}
imageObj.put("ContentID", contentArray);
JSONObject criObj = new JSONObject();
criObj.put("image", imageObj);

ChartImageExportServiceImpl imageExportSvr = new ChartImageExportServiceImpl();
try {
imageUrlObj = imageExportSvr.doExportImageAction(criObj);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
webDriver.close();
webDriver.quit();
}
return imageUrlObj;
}
}
解释两处代码1. webDriver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
因为浏览器打开显示需要时间， 所以要等页面出来之后才能进行解析。（这个时间设定可以根据实际状况进行设定）

2. WebElement svgElement = webElement.findElement(By.xpath(".//*[name()='svg']"));
这个是用来找SVG代码段的。语法是Xpath 的语法