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