批量打印之jquery局部打印 JS

上个月弄了个批量打印的功能，觉得以后可能用得着，就写个博客记一下，免得忘记了。说这个之前，先来说一下我用过的两个打印插件，一个是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(''); }); doc.write('' + $(ele).html() + ''); doc.close(); var frameWindow = iframe.contentWindow; frameWindow.close(); frameWindow.focus(); frameWindow.print(); } var removePrintArea = function(id) { $("iframe#" + id).remove(); }; })(jQuery);

3、demo：

要打印的内容区域

4、说一个可能遇到且我已经解决的问题：打印出来的东东没有样式。
解决方法：将页面中标签中的样式全部摘出来放到一个css文件中去，然后将这个css文件引入到页面上来。
为什么这样子可以解决：
先看jquery.PrintArea.js的源码，它的实现原理基本上可以理解成这样子：
点击“打印”时，它先在页面中生成一个iframe（宽高为0，left、top为-500，这样子在当前页面就看不到这个frame了），
然后将页面里边引入的（link方式）css文件也引入到iframe中，
再将选定区域（jquery选择器选定的对象）的内容复制到iframe中，
最后调用系统的print()方法进行打印。
理解了源码之后，再来理解“打印出来的东西没有样式“”也就容易了，因为它只是处理了标签中的样式，木有处理中的样式呀。
【批量打印之jquery局部打印】
顺便再多嘴一句：在解决这个问题时，看到有人说处理将css内容摘到一个文件里边之外，还需要在标签中添加"media=print"，我试着加了下打印出来是有样式，但是页面显示的却没有样式了。也不知道是我写的有问题，还是哪里又不对。

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

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