jquery插件使用笔记（一）：jPrintArea插件的使用

偏执的太偏执、 2021-11-16 07:04 456阅读 0赞

今天在发现一个很好的jquery插件jPrintArea，利用该插件可以实现打印网页中的指定元素。该插件的源代码为：

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

当然您也可以点 [这里下载][Link 1]  
   下面简单说说jPrintArea插件的使用。  
首先，引入jquery.js及jquery.jPrintArea.js文件

![Image 1][] < script type = " text/javascript "  src = " js/jquery.js " >< / script>   
![Image 1][] < script type = " text/javascript "  src = " js/jquery.jPrintArea.js " >< / script>

待打印部分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代码为

$.jPrintArea("#tabularData");

转载于:https://www.cnblogs.com/longer/archive/2008/03/07/1095485.html

[Image 1]: 
[dot.gif]: /images/20211116/24b6d3aa93d84dabb2a8d302be7e5f7f.png
[Link 1]: http://www.designerkamal.com/jPrintArea/jquery.jPrintArea.js