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