上个月弄了个批量打印的功能,觉得以后可能用得着,就写个博客记一下,免得忘记了。说这个之前,先来说一下我用过的两个打印插件,一个是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、说一个可能遇到且我已经解决的问题:打印出来的东东没有样式。
解决方法:将页面中