本案利用highchar作为前端,展示数据的图形效果,结合spring+springmvc来完成数据图片的导出。
jsp引入文件:
<script src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/highcharts.js"></script>
<script src="${pageContext.request.contextPath}/js/exporting.js"></script>
如不更改exporting,系统如没有拦截,可以顺利下载对应的图片的文件,如有拦截,不能下载。
更改内容如下:
jsp源码:
<script type="text/javascript">
$(function(){
$("#container").highcharts({
chart:{
events:{
click:function(event){
var label = this.renderer.label(
'x: ' +
Highcharts.numberFormat(event.xAxis[0].value,2) + ',y: ' +
Highcharts.numberFormat(event.yAxis[0].value,2),
event.xAxis[0].axis.toPixels(event.xAxis[0].value),
event.yAxis[0].axis.toPixels(event.yAxis[0].value)
).attr({
fill: Highcharts.getOptions().colors[0],
padding:10,
r: 5,
zIndex:8
}).css({
color:'#FFF'
}).add();
setTimeout(function(){
label.fadeOut();
},1000);
}
}
},
series:[{
data:[20,66,77,15,71,33,54,64,78,11,60,25,78,65,23,78,64,85,25]
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-widht:400px;height:400px"></div>
</body>
</html>
pringmvc:
============================分割线================================
@Controller
@RequestMapping("/highchar")
public class HighCharController {
@RequestMapping("/getHighchart")
public void getHighchart(HttpServletRequest request,HttpServletResponse response) throws IOException{
System.out.println("getHightchar...........................");
String type = request.getParameter("type");
String svg = request.getParameter("svg");
System.out.println(type+"88888888888888888888888888888");
System.out.println(svg+"88888888888888888888888888888");
ServletOutputStream out = response.getOutputStream();
if (null != type && null != svg){
svg = svg.replaceAll(":rect", "rect");
String ext = "";
Transcoder 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);
try {
t.transcode(input,output);
} catch (TranscoderException e){
out.print("编码流错误.");
e.printStackTrace();
}
} else if (ext == "svg"){
svg = svg.replace("http://www.w3.org/2000/svg", "http://www.w3.org/TR/SVG11/");
out.print(svg);
} else {
out.print("Invalid type: " + type);
}
} else {
response.addHeader("Content-Type", "text/html");
}
out.flush();
out.close();
}
}