最近做了一个项目,里面需要打印Echarts和部分介绍文字,看了网上很多例子,都写得不错,文字打印都没问题,但碰到Echarts就各种失效,好不容易找到原因,可以打印了,确发现只能打印一页,好气啊,不过最终还是找到了方法,所以今天就来分享下我的爬坑之路。
首先和网上的步骤一样,引下所需要的js文件:
<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script language="javascript" src="jquery.jqprint-0.3.js"></script>
当然,如果你的jq是2.0版本以上的会报一个错误:
Cannot read property 'opera' of undefined
所以这时候你需要再引一个js文件解决一下这个错误:
<script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>
引好所需要的文件以后就可以开始我们的爬坑之路了,
首先在你需要打印的最外层定义个id,
<div id="jqprint">中间就是你需要打印的内容</div>
然后你需要定义函数:
function jqprint() {
$("#jqprint").jqprint();
}
最后就是调用下这个函数了:
<button onclick="jqprint()"></button >
现在我们点击肯定就可以打印了,不过这只限于文字和img类的图片,背景图是不支持的,如果是Echarts图表怎么办呢?
首先我们需要把Echats图表转换成img图片,转换代码如下:
<div id=“Echarts”>>这里是你的图表</div>
<img id="EchartsImg" >这里是转换后的图片
然后我们写下转换Echarts的代码:
这是你的基础代码:
var Echarts= echarts.init(document.getElementById('Echarts'));
var EchartsOption = {}
Echarts.setOption(EchartsOption );
转换图片的代码:
var EchartsImg= document.getElementById('EchartsImg');
setTimeout(function(){
EchartsImg.src = Echarts.getDataURL({
pixelRatio: 2,
});
},1000)
这样就可以将Echarts图表转换成图片了,不过页面存在个img也不是事,所以你需要将img先隐藏掉:
#EchartsImg{
display:none
}
点击打印以后需要让img显示然后注意同时让Echarts隐藏:
我这里写了是过2秒再让图表显示,如果你可以监测到打印的取消按钮,也可以写在取消按钮下面。
function jqprint() {
setTimeout(function() {
$(".EchartsImg").show();
$(".Echarts").hide();
$("#jqprint").jqprint();
}, 1000)
setTimeout(function() {
$(".EchartsImg").hide();
$(".Echarts").show();
},2000)
}
这里写了个延迟,因为有时候图表加载过慢就导致打印残缺,所以上边的一些地方我都加了个延迟,这个可以根据项目而定,如果不加也没问题,也可以选择不加。
好了,上边配置也差不多了,但是你打印以后发现竟然只能打印一页,你说气不气,贼气,最后我也是找了好多方法,最终还是被我试到了,那就是需要自定义一下打印的样式如下:
@media print {
html,
body {
height: inherit;
background: #000929;//自定义背景颜色
}
#jqprint{
height: inherit;
}
}
另外说明下里面几个参数:
jqprint()中可以写入参数,一般有以下几种:
jqprint({
debug: false, //如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,可以再源码中调大),默认是false
importCSS: true, //true表示引进原来的页面的css,默认是true。(如果是true,先会找$("link[media=print]"),若没有会去找 $("link")中的css文件)
printContainer: true, //表示如果原来选择的对象必须被纳入打印(注意:设置为false可能会打破你的CSS规则)。
operaSupport: true//表示如果插件也必须支持歌opera浏览器,在这种情况下,它提供了建立一个临时的打印选项卡。默认是true
})
这样就可以完美打印了,如果有朋友和我一样的功能,用了我的方法没用的可以随时@我,或者来我们的大家族,欢迎你的到来!