ECharts如何打印数据
本篇内容介绍了“ECharts如何打印数据”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
ECharts打印数据的方法
一、 首先我们要做的,就是在Echarts图标上方定义一个img
1 <!--startprint-->
2 <img src="" id="printImg" style="height:
50%;width:90%;display: none;" />
3 <!--endprint-->
二、然后第二步,我们要创建一个用来打印的按钮。
1 <button id="print" text="打印图表" img="WEB-CORE/images/gif/Export.gif" action="PrintImage()" />
三、接下来,我们只需要定义打印函数就可以了,现在就把相关函数代码放在下面,可以自取哦。
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 }
“ECharts如何打印数据”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注蜗牛博客网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
评论