[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 blocke.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 的语法