古风名字_[Ext JS 4] 實(shí)戰之將chart導出為png, jpg 格式的文件| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[Ext JS 4] 實(shí)戰之將chart導出為png, jpg 格式的文件

## [Ext JS 4] 實(shí)戰之將chart導出為png, jpg 格式的文件
### 前言
[Web Chart系列之六] canvas Chart 導出圖文件
Chart 導出的原理很基本方法，在上一篇已經(jīng)有介紹過(guò)。
對于Extjs 來(lái)說(shuō)，在 Ext.chart.Chart 這個(gè)類(lèi)直接有提供一個(gè) save( [config] ) 的方法， 調用這個(gè)方法， 就可以在browser 下載當前這個(gè)chart 的對應格式的圖形文件。
```
chart.save({
     type: 'image/png'
});
```
這里使用的技術(shù)是把數據傳遞到服務(wù)器端， 由服務(wù)器端產(chǎn)生圖再傳到前端。
所以， 在調用save 這個(gè)方法的時(shí)候， 你會(huì )發(fā)現， 請求會(huì )訪(fǎng)問(wèn)http://svg.sencha.io/ 這個(gè)地址。
曾經(jīng)， 大概在 2013 的年中的時(shí)候， 這個(gè)地址都可以訪(fǎng)問(wèn)， 當時(shí)不知何時(shí)， 這個(gè)地址的訪(fǎng)問(wèn)就會(huì )報 503 (Service Unavailable)的錯誤了。

這樣的話(huà)， 原本可以work 的chart 導出功能， 現在就不行了。
網(wǎng)上搜索一下， 是說(shuō)部分版本已經(jīng)不提供這個(gè)服務(wù)了。
不管如何， 講自己的服務(wù)放在別的地方， 總也不踏實(shí)， 是否可以開(kāi)發(fā)出這種服務(wù)呢？

### 原理
首先看一看， chart.save 時(shí)，前端傳遞了那些參數：
![](/upload/picture/2022-09-29/upload_735ec4d0857b47072b9c84e6db9499a0.png)

參數有四個(gè)：
width 和 height 應該是圖片的大小
type 應該是圖的保存格式
svg  傳遞的就是xml方式的svg 格式的數據。
所以問(wèn)題歸結為一點(diǎn)： 在服務(wù)端如何解析這個(gè)svg 格式的數據并生成圖片文件？

### 解決方法
看懂這些svg 數據， 并使用基本API生成一個(gè)圖片不失為一種解法？
但是對java 語(yǔ)言來(lái)說(shuō)， 是否已經(jīng)存在第三方包來(lái)幫我們直接做這種事呢？
答案之一就是：  
Batik
Batik是使用svg格式圖片來(lái)實(shí)現各種功能的應用程序以及Applet提供的一個(gè)基于java的工具包。
它是屬于 Apache軟件基金會(huì ) 的一個(gè)項目， 應該是值得信賴(lài)的。
項目主頁(yè)：  http://xmlgraphics.apache.org/batik/
下載地址：http://mirrors.cnnic.cn/apache/xmlgraphics/batik/、
開(kāi)發(fā)步驟：
1. 下載batik-1.7.zip （ 目前的最新版） 并解壓
2. 把根目錄， lib 和 extensions 目錄下的所有lib 包拷入項目的web lib 中。(可以選擇)
3. 寫(xiě)一個(gè)servlet   ImageExportService.java
/**
* author:oscar999
*/
```
import java.io.IOException;
import java.io.OutputStream;
import java.io.StringReader;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.batik.transcoder.TranscoderException;
import org.apache.batik.transcoder.TranscoderInput;
import org.apache.batik.transcoder.TranscoderOutput;
import org.apache.batik.transcoder.image.JPEGTranscoder;
import org.apache.batik.transcoder.image.PNGTranscoder;
publicclassImageExportServiceextendsHttpServlet {
/**
	 * 
	 */
privatestaticfinallongserialVersionUID=1L;
/**
	 * Post File to Client
	 * Input Parameters: 
	 *  type(image type, as png, jpeg), 
	 *  svg(svg string, post by extjs), 
	 *  filename(save file name)
	 */
@Override
protectedvoiddoPost(HttpServletRequest request, HttpServletResponse response)throws ServletException,
			IOException {
Stringtype= request.getParameter("type");		
Stringsvg= request.getParameter("svg");
Stringfilename="chart";
if( request.getParameter("filename")!=null&&request.getParameter("filename").length()>0)
		{
			filename = request.getParameter("filename");
		}
		String postfix;
if ("image/jpeg".equals(type)) {
			response.setContentType("image/jpeg");
			postfix = "jpg";
		} else {
			response.setContentType("image/png");
			postfix = "png";
		}
		response.setHeader("Content-Disposition", "attachment; filename=" + filename + "." + postfix);
StringReaderstringReader=newStringReader(svg);
OutputStreamout= response.getOutputStream();
try {
TranscoderInputinput=newTranscoderInput(stringReader);
TranscoderOutputoutput=newTranscoderOutput(out);
if ("image/jpeg".equals(type)) {
newJPEGTranscoder().transcode(input, output);
			} else {
newPNGTranscoder().transcode(input, output);
			}
		} catch (TranscoderException e) {
thrownewServletException(e);
		}
	}
}
```

4.  在 web.xml 中配置此servlet 的請求路徑
```
<servlet>
<servlet-name>ImageExportServiceservlet-name>
<servlet-class>com.XXX.ImageExportServiceservlet-class>
servlet>
<servlet-mapping>
<servlet-name>ImageExportServiceservlet-name>
<url-pattern>/ImageExportServiceurl-pattern>
servlet-mapping>
```
5.  讓Extjs 的Chart.save 切換到新的服務(wù)器。
Ext.draw.engine.ImageExporter.defaultUrl = 'ImageExportService';
(注意， 這部分是寫(xiě)在web端的， 可以放在 Ext.onReady 里面)

6. 全部完成， 寫(xiě)個(gè)例子測試一下
```javascript
//author: oscar999
 西華升騰.數字云創(chuàng  )  版權所有  <a  target="_blank"> 蜀ICP備09028009號</a>
					<code> Powered by <strong><a href="http://555ad.cn" target="_blank">STIDEM</a></strong> 1.3.8</code>
				</div>
			</div>
		</footer>

</div>

<!--
			SIDE PANEL

sidepanel-dark 			= dark color
				sidepanel-light			= light color (white)
				sidepanel-theme-color		= theme color

sidepanel-inverse		= By default, sidepanel is placed on right (left for RTL)
								If you add "sidepanel-inverse", will be placed on left side (right on RTL).
		-->
	<div   class="0c0icawmmm"   id="sidepanel" class="sidepanel-light">
		<a id="sidepanel_close" href="#">
			
			<i class="glyphicon glyphicon-remove"></i>
		</a>

<ul class="list-group">