您的位置：首页 > Web前端 > HTML

Echarts3之html2canvas下载图表（后续生成PDF）

2017-03-13 16:40 441 查看
Echarts提供了下载图表的功能，但是仅仅满足客户端下载到本地，不经过项目本身的后台，对于高度自定义是不能满足的。

首先页面引入html2canvas插件。

<script src="//cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>


然后引入Echarts。对应自己的echarts.js路径

<script src="<%=base %>/js/echart/echarts3.js" type="text/javascript" charset="utf-8"></script>


index.jsp页面

<%@ page language="java" pageEncoding="UTF-8"%>
<%--引入JSTL核心标签库 --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String base = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+""+request.getContextPath();
%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>province</title>
<link rel="stylesheet" type="text/css" href="<%=base %>/css/bootstrap/bootstrap.min.css" />
</head>

<body>
<div class="container">
<div id="pie" style="width: 800px; height: 500px; float: center;"></div>
</div>
<form action="uploadimg" method="post" id = "form">

<input type="submit" value=""/>
</form>
<script src="//cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="<%=base %>/js/echart/echarts3.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=base %>/js/echart/province.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var Echart_01 = echarts.init(document.getElementById("pie"));
var legend_data = [ '短暂性脑缺血发作', '脑梗死', '脑内出血', '蛛网膜下腔出血', '其他未能分类的卒中' ];
var data = [ {value : 7,name : '脑梗死'}, {value : 4,  name : '短暂性脑缺血发作'}, {value : 35,    name : '脑内出血'}, {value : 53,name : '蛛网膜下腔出血'}, {value : 83, name : '其他未能分类的卒中'} ];
var option = pie(legend_data, data);
Echart_01.setOption(option);

function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/jpeg");
return image;
}
setTimeout(function() {
html2canvas(document.getElementById('pie'), {
onrendered : function(canvas) {
setTimeout(function() {
var img = convertCanvasToImage(canvas);
var input = document.createElement('input');
var form = document.getElementById('form');
console.log(form);
input.setAttribute('type', 'hidden');
input.setAttribute('name', 'data');
input.setAttribute('value', img.src);
form.appendChild(input1);
form.submit();
}, 2000)
}
});
}, 2000);
</script>
</body>
</html>


然后是province.js代码：

function pie(legend_data,data) {
var option = {
tooltip: {
formatter: function(params, ticket, callback) {
return params.name + " :<br/> " + params.value + " (" + params.percent + "%)";
}
},
legend: {
orient: 'vertical',
right: 'right',
data : legend_data
},
series: [{
name: '病例数量',
type: 'pie',
radius: '50%',
center: ['40%', '60%'],
data: data,
itemStyle: {
normal: {
label: {
formatter: function(params, ticket, callback) {
return params.name + ":\r\n" + params.value + " (" + params.percent + "%)";
}
},
}
}
}]
};
return option;
}


Controller代码：

@RequestMapping(value = "uploadimg", method = RequestMethod.GET)
public String upload1(HttpServletRequest request, HttpServletResponse response) {
System.err.println("test");
return "test";
}

@RequestMapping(value = "uploadimg", method = RequestMethod.POST)
@ResponseBody
public String upload(@RequestParam("data") String data, HttpServletRequest request, HttpServletResponse response) {
System.err.println(data);
PDFUtils.getImgPath(data);
return "success";
}


PDFUtils.java

public class PDFUtils {
public static String getImgPath(String data) {
// 图片输出路径
String imgFilePath = null;
try {
Base64 base64 = new Base64();
// base64编码解码
byte[] k = base64.decode(data.substring("data:image/jpeg;base64,".length()));
InputStream is = new ByteArrayInputStream(k);
String fileName = UUID.randomUUID().toString();
//String pdfFilePath = ShopApplicationResource.shopResource.getString("pdftempfiles.file.root");
String pdfFilePath = "D://test//echarts//";
imgFilePath = pdfFilePath + fileName + ".jpg";
double ratio = 1.0;
BufferedImage image = ImageIO.read(is);
// 设置图片是否缩放
int newWidth = (int) (image.getWidth() * ratio);
int newHeight = (int) (image.getHeight() * ratio);
Image newimage = image.getScaledInstance(newWidth, newHeight, Image.SCALE_SMOOTH);
BufferedImage tag = new BufferedImage(newWidth, newHeight, BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(newimage, 0, 0, null);
g.dispose();
// 使用io将图片写入文件中
ImageIO.write(tag, "jpg", new File(imgFilePath));
} catch (IOException e) {
e.printStackTrace();
}
return imgFilePath;
}
}


访问uploadimg首先出现应该显示的图表，4秒后跳转’success’

到D盘test文件夹下的echarts文件夹下查看下载好的图片。

OK
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航