[Ext JS 4]后台自动产生图档| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

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

## [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. 代码准备好之后就是代码呼叫了；
直接上代码
```java
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;
publicclassDashHTMLDriverProcessor {
/**
	 * 
	 * @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 idDivMap) {
JSONObjectimageUrlObj=null;
if (chromeDriverUrl != null && chartUrl != null && idDivMap != null) {
JSONObjectimageObj=newJSONObject();
JSONArraycontentArray=newJSONArray();
			System.getProperties().setProperty("webdriver.chrome.driver", chromeDriverUrl);
WebDriverwebDriver=newChromeDriver();
			webDriver.get(chartUrl);
			webDriver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
@SuppressWarnings("rawtypes")
Iteratorit= idDivMap.entrySet().iterator();
while (it.hasNext()) {
@SuppressWarnings("unchecked")
				Entry entry = (Entry) it.next();
StringchartId= entry.getKey();
StringdivId= entry.getValue();
WebElementwebElement= webDriver.findElement(By.id(divId));
WebElementsvgElement= webElement.findElement(By.xpath(".//*[name()='svg']"));
// String htmlstr = webElement.toString();
// String htmlstr = webElement.getAttribute("innerHTML");
Stringhtmlstr= svgElement.getAttribute("outerHTML");
				contentArray.add(chartId);
				imageObj.put(chartId, htmlstr);
			}
			imageObj.put("ContentID", contentArray);
JSONObjectcriObj=newJSONObject();
			criObj.put("image", imageObj);
ChartImageExportServiceImplimageExportSvr=newChartImageExportServiceImpl();
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 的语法

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

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

网站导航