文档章节

含有echart 图表的报表打印

tianyawhl
 tianyawhl
发布于 2016/03/16 17:05
字数 312
阅读 595
收藏 1

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

最近需要打印含有echart图表的报表,采用jqprint插件打印,直接用jqprint打印echart的图不显示,这里需要借助img 来实现

首先下载jqprint插件,把jquery和jqprint文件引用

<script src="../../plugins/jQuery/jquery-1.4.4.min.js"></script>
 <script src="../../plugins/jqprint/jquery.jqprint-0.3.js"></script>

在页面上增加一个按钮  <input class="" type="button" onclick=" a()" value="打印"/>

在生成图表的div上面增加img元素

 <div class="">

       <img id="printImg1" style="width:100%;display:none;" >

      <div id="barchart1" style="height:450px;"></div>

      </div>

var myChart2 = echarts.init(document.getElementById('barchart1'),theme); 

     myChart2.setOption(option3);

     var img1 = document.getElementById('printImg1');

   img1.src = myChart2.getDataURL({

    pixelRatio: 2,

    backgroundColor: '#fff'

   });

下面为调用jqprint插件,并把echart生成的图隐藏,显示img里面的图,特别注意width的设定会影响打印字体的大小
<script language="javascript">

  function  a(){

  $("#printArea").css("width","305mm");

  document.getElementById('printImg1').style.display="block";

  document.getElementById('barchart1').style.display="none";

  $("#printArea").jqprint();

  }

  </script>

更多前端实用知识

如有疑问请关注微信公众号:前端之攻略

我会详细解答

© 著作权归作者所有

tianyawhl
粉丝 8
博文 272
码字总数 143984
作品 0
常州
前端工程师
私信 提问
加载中

评论(4)

tianyawhl
tianyawhl 博主

引用来自“Dynasty丶Me”的评论

这个问题我解决了,是我没看到,引用了两个jquery-min,但是出现了一个新的问题,打印的时候,打印不全,调用浏览器的打印,明明需要两页,但是打印预览的时候,只有一页。这你怎么解决的?

回复@Dynasty丶Me : 我没遇到过打印不全
Dynasty丶Me
Dynasty丶Me
这个问题我解决了,是我没看到,引用了两个jquery-min,但是出现了一个新的问题,打印的时候,打印不全,调用浏览器的打印,明明需要两页,但是打印预览的时候,只有一页。这你怎么解决的?
tianyawhl
tianyawhl 博主

引用来自“Dynasty丶Me”的评论

那为什么我弄得时候他说jqprint()未定义呢?

回复@Dynasty丶Me : jqprint 对应的jquery版本要低,我用的是jquery-1.4.4.min.js
Dynasty丶Me
Dynasty丶Me
那为什么我弄得时候他说jqprint()未定义呢?
打印含有echart图表的报表,采用jqprint插件打印

打印含有echart图表的报表,采用jqprint插件打印,echart图表都可以打印出来,但是明明页面打印出来一页不够,但只能打印一页 function a(){ SimplePop.confirm("打印之前请先确定先填写了评估...

Dynasty丶Me
2017/01/06
954
0
echart 图表打印问题

@李吖吖 你好,想跟你请教个问题:请问之前您问的用Lodop 打印echart 图表不显示的问题,请问您解决了吗,我也遇到差不多同样的问题,我用的是jqprint也是echart图不显示。...

tianyawhl
2016/03/01
967
0
如何让单文件引入后的图表能够在浏览器调整窗口大小时图表也刷新宽度?

@Kener-林峰 你好,想跟你请教个问题: 我根据echart提供的demo,在我的工程中加入了echart(echarts-all.js),但是如何让图表的宽度自动那? echart提供的例子都支持,可是单文件引入后就不...

宋万龙
2014/12/12
1K
2
行者/ECharts-Helper

ECharts-Helper 项目介绍 echart-helper是什么? echart-helper是一款echarts辅助开发插件,能够帮助开发者快速构建echart图表。 安装教程 引入jquery、echarts及echarts.helper三个文件即可...

行者
2018/06/25
0
0
Echart中图表和组件初始化样式修改

@Kener-林峰 你好 请教你个问题 我们目前在使用Echart做一个项目,根据客户要求和意见,需要对图表的默认图形,组件的默认图形进行修改和调整,请问可以对Echart的图表和组件进行调整和修改,...

last_Journey
2014/09/11
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

跑分44W的荣耀V30 5G手机,真香!

     昨天看了红米K30的发布会,感触颇多啊,“卢本伟”就是雷军请来恶心荣耀的吧,恶心的还淋漓尽致,发布会全程diss荣耀V30,结果跑分出来的那一刻,网友们笑了。红米K30 26W+的跑分充...

梅丽莎好
20分钟前
7
0
技术分享 | 巧用 binlog Event 发现问题

作者:高鹏(八怪) 文章末尾有他著作的《深入理解 MySQL 主从原理 32 讲》,深入透彻理解 MySQL 主从,GTID 相关技术知识。 有了前面对 Event 的了解,我们就可以利用这些 Event 来完成一些...

爱可生
20分钟前
7
0
php之微信公众号发送模板消息

讲一下开发项目中微信公众号发送模板消息的实现过程(我用的还是Thinkphp5.0)。先看一下效果,如图: 就是类似于这样的,下面讲一下实现过程: 第一步:微信公众号申请模板消息权限: 立即申请...

owenzhang24
26分钟前
6
0
Dev 日志 | 如何将 jar 包发布到 Maven 中央仓库

摘要 Maven 中央仓库并不支持直接上传 jar 包,因此需要将 jar 包发布到一些指定的第三方 Maven 仓库,比如:Sonatype OSSRH 仓库,然后该仓库再将 jar 包同步到 Maven ,本文详细记录整个发...

NebulaGraph
37分钟前
6
0
海思3516cv500 SDK开发环境搭建

环境Ubuntu 16.0.4 LTS, SDK文件:Hi3516CV500_SDK_V2.0.1.0.tgz,解压此文件到当前目录运行Hi3516CV500_SDK_V2.0.1.0目录下的sdk.unpack,执行此脚本时报unknown source,但sdk.unpack脚本里...

仪山湖
39分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部