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

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

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

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

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

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的设定会影响打印字体的大小
    
       function  a(){  $("#printArea").css("width","305mm");  document.getElementById('printImg1').style.display="block";  document.getElementById('barchart1').style.display="none";  $("#printArea").jqprint();  }  
    

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

我会详细解答