来源:http://www.biuuu.com/?p=722
实现javascript打印功能,打印整个页面就很简单,但如果指定打印某一个区域就有点难点,这里有一个jQuery插件PrintArea可实现打印页面某区域功能。
使用说明
需要使用jQuery库文件和PrintArea库文件
使用方法
一,包含文件部分
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript" src="jquery.PrintArea.js"></script>
二,html部分
- <div id="biuuu_button">打印</div>
- <div id="myPrintArea">
- .....文本打印部分.....
- </div>
三,javascript部分
- $("div#biuuu_button").click(function(){
- $("div#myPrintArea").printArea();
- });
jQuery插件PrintArea完整方法如下:
- (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);
jQuery插件PrintArea的库代码非常简单,轻松实现javascript打印页面某区域功能。