打印ECharts图表

Echarts十分好用，还能够保存为图片，进而打印，麻烦的是甲方爸爸想要在界面上直接打印图表，这可麻烦死了，今下午查遍了度娘，最终找到了解决方法。

首先在Echarts图标上方定义一个img

<!--startprint-->
		<img src="" id="printImg" style="height: 50%;width:90%;display: none;" />
		<!--endprint-->

那两个注释用于定位打印的区域。

创建一个按钮用于调用打印

<sapphire:button id="print" text="打印图表" img="WEB-CORE/images/gif/Export.gif" action="PrintImage()" />
		

是button类型的就行，因为我这个项目是国外封装过的，所以调用方式和平常的不同。

最重要的一步，定义打印函数

function PrintImage() {
				// 把echarts图片转成64编码的图片
				var img = new Image();
				var imgSrc = myChart.getDataURL();
				// 渲染到图表上面展示
				$("#printImg").attr("src", imgSrc).show();
				//这里要使用延时加载，才不会在图片还没渲染出来的时候就调用打印的方法
				setTimeout(function() {
					//直接调用浏览器打印功能
					bdhtml = window.document.body.innerHTML;
					//定义打印区域起始字符，根据这个截取网页局部内容     
					sprnstr = "<!--startprint-->"; //打印区域开始的标记
					eprnstr = "<!--endprint-->"; //打印区域结束的标记  
					prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
					prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
					//还原网页内容
					window.document.body.innerHTML = prnhtml;
					//开始打印
					window.print();
				}, 1000);

			}

大功告成，忙活了一下午的结果