Echarts圖表打印
Echarts用作統計十分好用，還能夠轉為圖片，進而保存、打印。
轉圖片的方式也不麻煩，步驟如下：
1、首先在Echarts圖標上方定義一個img
1 <!--startprint--> 2 <img src="" id="printImg" style="height: 50%;width:90%;display: none;" /> 3 <!--endprint-->
2、創建一個按鈕用於調用打印
1 <button id="print" text="打印圖表" img="WEB-CORE/images/gif/Export.gif" action="PrintImage()" />
3、定義打印函數
1 function PrintImage() {
2 // 把echarts圖片轉成64編碼的圖片
3 var img = new Image(); 4 var imgSrc = myChart.getDataURL(); 5 // 渲染到圖表上面展示 6 $("#printImg").attr("src", imgSrc).show(); 7 //這里要使用延時加載，才不會在圖片還沒渲染出來的時候就調用打印的方法 8 setTimeout(function() { 9 //直接調用瀏覽器打印功能 10 bdhtml = window.document.body.innerHTML; 11 //定義打印區域起始字符，根據這個截取網頁局部內容 12 sprnstr = "<!--startprint-->"; //打印區域開始的標記 13 eprnstr = "<!--endprint-->"; //打印區域結束的標記 14 prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17); 15 prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); 16 //還原網頁內容 17 window.document.body.innerHTML = prnhtml; 18 //開始打印 19 window.print(); 20 }, 1000); 21 22 }
take it !!!