[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 时，前端传递了那些参数：

参数有四个：

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;public class ImageExportService extends HttpServlet {/** *  */private static final long serialVersionUID = 1L;/** * Post File to Client * Input Parameters:  *  type(image type, as png, jpeg),  *  svg(svg string, post by extjs),  *  filename(save file name) */@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException {String type = request.getParameter("type");String svg = request.getParameter("svg");String filename = "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);StringReader stringReader = new StringReader(svg);OutputStream out = response.getOutputStream();try {TranscoderInput input = new TranscoderInput(stringReader);TranscoderOutput output = new TranscoderOutput(out);if ("image/jpeg".equals(type)) {new JPEGTranscoder().transcode(input, output);} else {new PNGTranscoder().transcode(input, output);}} catch (TranscoderException e) {throw new ServletException(e);}}}

4.  在 web.xml 中配置此servlet 的请求路径

  <servlet>  <servlet-name>ImageExportService</servlet-name>  <servlet-class>com.XXX.ImageExportService</servlet-class>  </servlet>    <servlet-mapping>      <servlet-name>ImageExportService</servlet-name>      <url-pattern>/ImageExportService</url-pattern>  </servlet-mapping>

5.  让Extjs 的Chart.save 切换到新的服务器。

Ext.draw.engine.ImageExporter.defaultUrl = 'ImageExportService';

(注意， 这部分是写在web端的， 可以放在 Ext.onReady 里面)

6. 全部完成， 写个例子测试一下

//author: oscar999<script type="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 传入)