Echarts图表打印


 

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 !!!

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM