jqprint打印的简单使用

最近做了一个项目，里面需要打印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
})

这样就可以完美打印了，如果有朋友和我一样的功能，用了我的方法没用的可以随时@我，或者来我们的大家族，欢迎你的到来！
在这里插入图片描述

jqprint打印的简单使用

猜你喜欢