圖表插件Highcharts使用本地action、servlet導出圖檔

問題：highcharts導出圖檔的功能每次都要經過遠端的伺服器。

解決：使用自己的寫的action或者servlet來實作這個下載下傳圖檔的功能。不需要連接配接外網

1.漢化highcharts:

Highcharts.setOptions({  
		        lang: {  
		            printChart:"列印圖表",  
		            downloadJPEG: "下載下傳JPEG 圖檔" ,  
		            downloadPDF: "下載下傳PDF文檔"  ,  
		            downloadPNG: "下載下傳PNG 圖檔"  ,  
		            downloadSVG: "下載下傳SVG 矢量圖" ,  
		            exportButtonTitle: "導出圖檔"  
		        }  
		    }); 
           

2.在初始化圖形時添加一個屬性：

Highcharts.chart('container', {
				chart : {
					type : 'pie',
					options3d : {
						enabled : true,
						alpha : 45,
						beta : 0
					}
				},
				
				exporting:{  
		            		enabled:true,  
		            		filename:'class-booking-chart',  
		            		url:'<%=basePath%>exportAction!export.action', 
		       		}}）
           

3.這樣圖檔的請求就切換到本地了。我這裡用的是注解的struts2，mvc架構用法都一樣

package com.libo.yy.action;

import java.io.StringReader;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.batik.transcoder.SVGAbstractTranscoder;
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;
import org.apache.fop.svg.PDFTranscoder;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.convention.annotation.Action;

import com.libo.action.util.BaseAction;
import com.libo.po.User;

@Action(value = "exportAction")
public class HighcharsExportAction extends BaseAction<User> {
	private String type;
	private String svg;

	public void export() {
		try {
			HttpServletResponse response = ServletActionContext.getResponse();
			HttpServletRequest request = ServletActionContext.getRequest();
			request.setCharacterEncoding("utf-8");// 注意編碼
			ServletOutputStream out = response.getOutputStream();
			if (null != type && null != svg) {
				svg = svg.replaceAll(":rect", "rect");
				String ext = "";
				SVGAbstractTranscoder t = null;
				if (type.equals("image/png")) {
					ext = "png";
					t = new PNGTranscoder();

				} else if (type.equals("image/jpeg")) {
					ext = "jpg";
					t = new JPEGTranscoder();

				} else if (type.equals("application/pdf")) {
					ext = "pdf";
					t = new PDFTranscoder();

				} else if (type.equals("image/svg+xml")) {
					ext = "svg";
				}

				response.addHeader("Content-Disposition",
						"attachment; filename=chart." + ext);
				response.addHeader("Content-Type", type);

				if (null != t) {
					TranscoderInput input = new TranscoderInput(
							new StringReader(svg));
					TranscoderOutput output = new TranscoderOutput(out);
					t.transcode(input, output);
				}
			}
			out.flush();
			out.close();
		} catch (Exception e) {
			e.printStackTrace();
		}

	}

	public String getType() {
		return type;
	}

	public void setType(String type) {
		this.type = type;
	}

	public String getSvg() {
		return svg;
	}

	public void setSvg(String svg) {
		this.svg = svg;
	}

}

           

4.這裡需要注意的是需要導入batik的jar包

在這裡引用一個下載下傳頻道中的一個連接配接點選打開連結