批量打印之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（有点复杂）。