首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >含有echart 图表的报表打印 原

含有echart 图表的报表打印 原

作者头像
tianyawhl
发布2019-04-04 16:56:02
发布2019-04-04 16:56:02
2K0
举报
文章被收录于专栏:前端之攻略前端之攻略

最近需要打印含有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元素

代码语言:javascript
复制
 <div class="">

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

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

      </div>
代码语言:javascript
复制
var myChart2 = echarts.init(document.getElementById('barchart1'),theme); 

     myChart2.setOption(option3);

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

   img1.src = myChart2.getDataURL({

    pixelRatio: 2,

    backgroundColor: '#fff'

   });
代码语言:javascript
复制
下面为调用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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016/03/16 ,如有侵权请联系 cloudcommunity@tencent.com 删除
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档