您的位置:首页 > Web前端 > JQuery

jQuery插件PrintArea实现javascript打印页面某区域功能

2011-10-21 13:26 1231 查看
来源: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打印页面某区域功能。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: