jquery插件jPrintArea使用方法--JavaScript/Ajax--编程设计网

=波波日志 > JavaScript/Ajax > jquery插件jPrintArea使用方法=

[转]jquery插件jPrintArea使用方法

　　jquery插件jPrintArea，利用该插件可以实现打印网页中的指定元素。该插件的源代码为：

-JavaScript

jQuery.jPrintArea=function(el){
var iframe=document.createElement('IFRAME');
var doc=null;
$(iframe).attr('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc=iframe.contentWindow.document;
var links=window.document.getElementsByTagName('link');
for(var i=0;i<links.length;i++)
if(links[i].rel.toLowerCase()=='stylesheet')
doc.write('<link type="text/css" rel="stylesheet" href="'+links[i].href+'"></link>');
doc.write('<div class="'+$(el).attr("class")+'">'+$(el).html()+'</div>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
alert('Printing');
document.body.removeChild(iframe);
}

　　下面简单说说jPrintArea插件的使用。
　　首先，引入jquery.js及jquery.jPrintArea.js文件
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jPrintArea.js"></script>
待打印部分html代码为：

-HTML

<div id="tabularData">
<table cellspacing="1" cellpadding="6" width="100%" class="tableData">
<thead>
<tr>
<th>Name</th>
<th>Major</th><th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
</tr></thead>
<tbody>
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr><tr>
<td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>

</table>

　　打印执行的js代码为

-JavaScript

$.jPrintArea("#tabularData");

类别：JavaScript/Ajax　作者：转载　日期：2011-09-02　【评论：0】　

上一篇：javascript 数组方法　
下一篇：SWFUpload中文使用说明文档

暂时没有评论！

发表留言

热门博文