[Ext JS 4] 实战之将chart导出为png, jpg 格式的文件| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

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

## [Ext JS 4] 实战之将chart导出为png, jpg 格式的文件
### 前言
[Web Chart系列之六] canvas Chart 导出图文件
Chart 导出的原理很基本方法，在上一篇已经有介绍过。
对于Extjs 来说，在 Ext.chart.Chart 这个类直接有提供一个 save( [config] ) 的方法， 调用这个方法， 就可以在browser 下载当前这个chart 的对应格式的图形文件。
```
chart.save({
     type: 'image/png'
});
```
这里使用的技术是把数据传递到服务器端， 由服务器端产生图再传到前端。
所以， 在调用save 这个方法的时候， 你会发现， 请求会访问http://svg.sencha.io/ 这个地址。
曾经， 大概在 2013 的年中的时候， 这个地址都可以访问， 当时不知何时， 这个地址的访问就会报 503 (Service Unavailable)的错误了。

这样的话， 原本可以work 的chart 导出功能， 现在就不行了。
网上搜索一下， 是说部分版本已经不提供这个服务了。
不管如何， 讲自己的服务放在别的地方， 总也不踏实， 是否可以开发出这种服务呢？

### 原理
首先看一看， chart.save 时，前端传递了那些参数：
![](/upload/picture/2022-09-29/upload_735ec4d0857b47072b9c84e6db9499a0.png)

参数有四个：
width 和 height 应该是图片的大小
type 应该是图的保存格式
svg  传递的就是xml方式的svg 格式的数据。
所以问题归结为一点： 在服务端如何解析这个svg 格式的数据并生成图片文件？

### 解决方法
看懂这些svg 数据， 并使用基本API生成一个图片不失为一种解法？
但是对java 语言来说， 是否已经存在第三方包来帮我们直接做这种事呢？
答案之一就是：  
Batik
Batik是使用svg格式图片来实现各种功能的应用程序以及Applet提供的一个基于java的工具包。
它是属于 Apache软件基金会 的一个项目， 应该是值得信赖的。
项目主页：  http://xmlgraphics.apache.org/batik/
下载地址：http://mirrors.cnnic.cn/apache/xmlgraphics/batik/、
开发步骤：
1. 下载batik-1.7.zip （ 目前的最新版） 并解压
2. 把根目录， lib 和 extensions 目录下的所有lib 包拷入项目的web lib 中。(可以选择)
3. 写一个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 切换到新的服务器。
Ext.draw.engine.ImageExporter.defaultUrl = 'ImageExportService';
(注意， 这部分是写在web端的， 可以放在 Ext.onReady 里面)

6. 全部完成， 写个例子测试一下
```javascript
//author: oscar999
<scripttype="text/javascript">
var chart;
var panel1;
Ext.require(['*']);
Ext.onReady(function() {
Ext.draw.engine.ImageExporter.defaultUrl = '/'+WEB_PROJECT_NAME+'/ImageExportService';
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
	        { 'name': 'metric one',   'data':100000 },
	        { 'name': 'metric two',   'data': 7 },
	        { 'name': 'metric three', 'data': 5 },
	        { 'name': 'metric four',  'data': 2 },
	        { 'name': 'metric five',  'data':27 }
	    ]
	});
var chart = Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
	        },
title: 'Sample Values',
grid: true,
minimum: 0
	    }, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
	    }],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
	          }
	        },
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
	        },
xField: 'name',
yField: 'data'
	    }]
	});
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
	        chart.save({
type: 'image/png',
filename:'testfile'
	        });
	    }
	});
});
script>
```

### 跨浏览器处理
可能想到会有一个问题， IE 的低版本还只是支持vml 绘图， 那在这些版本的IE中， 导出图是否就不行了呢？
其实不用担心， Extjs 已经帮我们处理好了， 即使在这些版本的IE中， 传递到服务器的也是 svg  格式的数据。
(另外发现的一点是， 如果要传入自己定义的参数, 比如filename 等， 直接从save 中可能不行，可以考虑从呼叫url 传入)

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

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

网站导航