含有echart 圖表的報表打印

最近須要打印含有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>

更多前端實用知識

若有疑問請關注微信公衆號：前端之攻略

我會詳細解答