使用jquery插件實現打印指定區域功能

本文轉載自查看原文 2012-08-21 22:16 9928 javascript

程序員話不多，直接上代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        
<title>支持放大顯示效果的TOP排行</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>    
<script type="text/javascript" src="jquery.PrintArea.js"></script>    
<script>  
$(document).ready(function(){   
  $("input#biuuu_button").click(function(){   
  
  $("div#myPrintArea").printArea();   
  
});   
});   
    
</script>  
</head>
<body>  
<input id="biuuu_button" type="button" value="打印"/> 
  
<div id="myPrintArea">
    <table width="760"  style="border:0.5px solid #000000" borderColor="#000000" align="center" cellpadding="0" cellspacing="0" class="tableBorder5">
      <tr> 
        <td height="30" colspan="6" align="center" class="TableTitle1"><b>報 修 的 詳 細 資 料</b></td>
  </tr>
  <tr align="center" > 
    <td width="118" height="30" class="TableBody1">報修編號：</td>
    <td width="112" height="30" class="TableBody1" ><span class="style2">BX2011082905983</span></td>
    <td width="120" class="TableBody1" >報修地點：</td>
    <td width="136" class="TableBody1" ><span class="style2">
      竹園
    </span></td>
    <td width="134" height="30" class="TableBody1" >故障物品<span lang="en-us">/</span>部件：</td>
        <td width="131" class="TableBody1" ><span class="style2">
          磁卡鎖
        </span></td>
  </tr>
      <tr align="center">
        <td width="118" height="30" class="TableBody1" >報修人：</td>
        <td width="112" height="30" class="TableBody1" ><span class="style2">信息員十號</span></td>
        <td width="120" height="30" class="TableBody1" >預約維修日期：</td>
        <td width="136" height="30" class="TableBody1" ><span class="style2">2011-08-29</span></td>
        <td height="30" class="TableBody1" >報修日期：</td>
        <td height="30" class="TableBody1" ><span class="style2">2011-8-29</span></td>
      </tr>
      <tr align="center">
        <td width="118" height="30" class="TableBody1" >聯系電話：</td>
        <td width="112" height="30" class="TableBody1" ><span class="style2">15955105802</span></td>
        <td width="120" height="30" class="TableBody1" >預約維修時間：</td>
        <td width="136" height="30" class="TableBody1" ><span class="style2">29號</span></td>
        <td height="30" class="TableBody1" >　</td>
        <td height="30" class="TableBody1" >　</td>
      </tr>
  <tr > 
    <td width="118" height="30" align="center" class="TableBody1" >報修地址：</td>
    <td height="30" colspan="5" class="TableBody1" >&nbsp;<span class="style2">竹園-1323</span></td>
      </tr>
  <tr >
    <td height="30" align="center" class="TableBody1" >具體故障現象:</td>
        <td colspan="5" class="TableBody1" >&nbsp;<span class="style2">竹園-1323   配鑰匙（已交費）</span></td>
  </tr>
 
</table>
</div>   
</body>
</html>

效果圖：

不同瀏覽器效果不同

google瀏覽器比較好

這是IE的效果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery 實現打印指定區域的內容 asp.net 實現在線打印功能，jQuery打印插件PrintArea實現自動分頁 jQuery：實現網頁的打印功能使用jquery.jqprint.js 實現的打印功能，IE9不能進行打印預覽、火狐打印空白界面 jQuery實現點擊div外的區域，來隱藏指定節點實現windows下屏幕指定區域截圖功能 JS打印指定區域內容 js打印div指定區域內容 Jquery局部打印插件 .NET中使用FastReport實現打印功能