含有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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016/03/16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
腾讯云 BI
腾讯云 BI（Business Intelligence，BI）提供从数据源接入、数据建模到数据可视化分析全流程的BI能力，帮助经营者快速获取决策数据依据。系统采用敏捷自助式设计，使用者仅需通过简单拖拽即可完成原本复杂的报表开发过程，并支持报表的分享、推送等企业协作场景。