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()” />

ECharts如何打印数据

三、接下来,我们只需要定义打印函数就可以了,现在就把相关函数代码放在下面,可以自取哦。

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如何打印数据”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

文章标题:ECharts如何打印数据,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/29720

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云认证作者
上一篇 2022年9月26日 上午1:39
下一篇 2022年9月26日 上午1:40

相关推荐

  • java BigDecimal类应用实例代码分析

    一.介绍 float和double类型的主要设计目标是为了科学计算和工程计算。他们执行二进制浮点运算,这是为了在广域数值范围上提供较为精确的快速近似计算而精心设计的。然而,它们没有提供完全精确的结果,所以不应该被用于要求精确结果的场合。但是,商业计算往往要求结果精确,这时候BigDecimal就派上…

    2022年8月31日
    66400
  • Mysql锁的内部实现机制是什么

    注:所列举代码皆出自Mysql-5.6 虽然现在关系型数据库越来越相似,但其背后的实现机制可能大相径庭。实际使用方面,因为SQL语法规范的存在使得我们熟悉多种关系型数据库并非难事,但是有多少种数据库可能就有多少种锁的实现方法。 Microsoft Sql Server2005之前只提供页锁,直到20…

    2022年9月15日
    73500
  • 电脑0x80070035找不到网络路径怎么解决

    解决0x80070035找不到网络路径的方法 方法一: 1、我们先单击“网络”,“打开网络和Internet设置” 2、接着我们选择下“网络和共享中心” 3、接着我们选择“更改高级共享设置” 4、接着我们勾选“启用共享以便可以访问网络的用户读取公用文件夹中的文件” 5、到了“网络和共享中心”,我们直…

    2022年9月15日
    1.7K00
  • php unserialize反序列化漏洞分析

    题目如下: 漏洞解析: (上图代码第11行正则表达式应改为:’/O:d:/’) 题目考察对php反序列化函数的利用。在第10行 loadData() 函数中,我们发现了 unserialize 函数对传入的 $data 变量进行了反序列。在反序列化前,对变量内容进行了判断,先…

    2022年8月30日
    80600
  • word如何生成目录

    word生成目录的方法: 1、首先打开你的Word文档,并进入或者输入一些内容。 2、选择里面的内容,点击开始中的标题1、标题2等, 并将其分别设置为不同级别的标题。 这一步一定要完成不然没法插入目录。 3、然后点击引用-目录,会出现下拉菜单,选择想要插入的目录样式, 当然也可以自定义目录样式,也可…

    2022年9月20日
    1.3K00
  • 如何逆向分析Spotify.app并hook其功能获取数据

    项目 该项目的目标是构建一个Spotify客户端,让它能够学习我的听曲习惯并跳过一些我通常会跳过的歌曲。不得不承认,这种需求来自于我的懒惰。我不想在当我有心情想要听某些音乐时,创建或查找播放列表。我希望的是在我的库中选择一首歌,然后可以随机播放其他歌曲,并从队列中删除不“flow(节奏与旋律的流畅)…

    2022年9月8日
    76700
  • HTML5导航标签指的是什么

    在HTML5中,nav标签是导航标签;nav的全称是navigation,意为导航,该标签定义导航链接的部分,用于表示HTML页面中的导航,该标签并不是所有的HTML文档都要使用,只是作为标注一个导航链接的区域。 本教程操作环境:windows10系统、HTML5版本、Dell G3电脑。 HTML…

    2022年8月31日
    65800
  • 远程代码执行漏洞实例分析

    0x01 认识 mongo-express mongo-express是一个MongoDB的Admin Web管理界面,使用NodeJS、Express、Bootstrap3编写而成。目前mongo-express应该是Github上Star非常多的MongoDB admin管理界面。部署方便,使用…

    2022年9月26日
    89500
  • mysql触发器如何取消

    在mysql中,可以使用DROP TRIGGER语句来取消已经定义的触发器,语法为“DROP TRIGGER 表名.触发器名;”或者“DROP TRIGGER 触发器名; ”,触发器的名称在当前数据库中必须具有少数的名称;“表名”选项若不省略则表示取消与指定表关联的触发器。 本教程操作环境:wind…

    2022年9月20日
    64300
  • vlookup函数匹配不出来只显示公式如何解决

    解决方法 名列前茅步,点击表格上方的“公式”按钮。 第二步,在下方菜单中找到并点击“显示公式”关闭它。 第三步,关闭完成,就可以发现我们的vlookup函数正常显示结果了。 关于“vlookup函数匹配不出来只显示公式如何解决”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vlookup函…

    2022年9月24日
    2.4K00
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部