打印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);

			}

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