批量打印之jquery局部打印

上个月弄了个批量打印的功能,觉得以后可能用得着,就写个博客记一下,免得忘记了。说这个之前,先来说一下我用过的两个打印插件,一个是Jquery打印插件(这次开始用的),一个是smsx.cab控件的打印插件。这里先说jQuery的局部打印功能(个人觉得jqprint和PrintArea就打印功能这块大同小异,所以就说简单点的PrintArea)

1、导Jquery库:想用Jquery的功能就得有人家的内库嘛,这个是毋庸置疑的。

2、导入jquery.PrintArea.js:在导入jquery库之后导入。其源码如下:

(function($) {
	var printAreaCount = 0;
	$.fn.printArea = function() {
		var ele = $(this);
		var idPrefix = "printArea_";
		removePrintArea(idPrefix + printAreaCount);
		printAreaCount++;
		var iframeId = idPrefix + printAreaCount;
		var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';
		iframe = document.createElement('IFRAME');
		$(iframe).attr({
			style : iframeStyle,
			id : iframeId
		});
		document.body.appendChild(iframe);
		var doc = iframe.contentWindow.document;
		$(document).find("link").filter(function() {
			return $(this).attr("rel").toLowerCase() == "stylesheet";
		}).each(
				function() {
					doc.write('<link type="text/css" rel="stylesheet" href="'
							+ $(this).attr("href") + '" >');
				});
		doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html()
				+ '</div>');
		doc.close();
		var frameWindow = iframe.contentWindow;
		frameWindow.close();
		frameWindow.focus();
		frameWindow.print();
	}
	var removePrintArea = function(id) {
		$("iframe#" + id).remove();
	};
})(jQuery);

3、demo

<input type="button" id="btnPrint" value="打印"/>
<div id="printContent">要打印的内容区域<div>

<script type="text/javascript">
$(function(){
        $("#btnPrint").click(function(){ $("#printContent").printArea(); });
});
</script>

 4、说一个可能遇到且我已经解决的问题:打印出来的东东没有样式

解决方法:将页面中<style>标签中的样式全部摘出来放到一个css文件中去,然后将这个css文件引入到页面上来。

为什么这样子可以解决:

先看jquery.PrintArea.js的源码,它的实现原理基本上可以理解成这样子:

点击“打印”时,它先在页面中生成一个iframe(宽高为0,left、top为-500,这样子在当前页面就看不到这个frame了),

然后将页面里边引入的(link方式)css文件也引入到iframe中,

再将选定区域(jquery选择器选定的对象)的内容复制到iframe中,

最后调用系统的print()方法进行打印。

理解了源码之后,再来理解“打印出来的东西没有样式“”也就容易了,因为它只是处理了<link>标签中的样式,木有处理<style>中的样式呀。

顺便再多嘴一句:在解决这个问题时,看到有人说处理将css内容摘到一个文件里边之外,还需要在<link>标签中添加"media=print",我试着加了下打印出来是有样式,但是页面显示的却没有样式了。也不知道是我写的有问题,还是哪里又不对。

5、说一说优点

至少有两个:a、可以局部打印,想打哪块打哪块,不需要在打印时顾虑其他的不相干内容也打印出来了;b、兼容性好,因为调用的是window对象的print()方法,且浏览器都支持这个方法(试了IE8、IE11、火狐、谷歌、360、QQ,效果都不错);

6、说一说缺点

也至少有三个:a、打印的时候每次都要弹出打印框让选择打印机,这个在自动打印的情况下比较烦人;b、自带页眉页脚,打印时如果不进行页面设置会自动加上页眉页脚且不太好去掉,也需要手动设置页边距,这个也比较烦人。c、不带预览,需要使用其他插件进行预览,如jquery-print-preview-plugin-master(有点复杂)。

相关推荐