碼上快樂

相關內容    簡體    繁體

使用jqprint插件完成頁面打印

本文轉載自   查看原文   2017-08-29 11:08   8958    JAVASCRIPT/ Jquery

使用jqprint插件完成頁面打印

jqprint是一個基於jQuery編寫的頁面打印的一個小插件，但是不得不承認這個插件確實很厲害，最近的項目中幫了我的大忙，在Web打印的方面，前端的打印基本是靠window.print()的方式進行打印的，而這個插件在其基礎上進行了進一步的封裝，可以打印網頁上的某個區域，這是個亮點。比如說現在要打印如下的一個效果：

我們可以通過寫代碼完成上述的效果，然后單擊網頁上的某個按鈕，在按鈕的處理方法里調用jqprint()，來完成這個區域的的打印顯示的操作，首先要獲取這個區域，然后調用一個方法即可了，如下所示：

 

[javascript]  view plain  copy
 
 print?
  1. $("#visaReport").jqprint({});  

 

這就是一個簡單的操作，但是實際需要的時候，有時我們頁面顯示樣式和我們打印的樣式是有些區別的，幸好CSS聲明的地方提供了一個media的屬性，我們可以指定其輸出的方式為print，即media=print的這個屬性，寫了這個屬性之后，所引入CSS的一些樣式在打印的時候才會生效了，通過在打印的時候，我們可以通過樣式去改變當前網頁的顯示內容，及顯示的樣式。先來看下代碼吧！

 

[html]  view plain  copy
 
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.        <head>  
  4.               <metacharsetmetacharset="UTF-8"/>  
  5.               <title>效果測試</title>  
  6.               <linkhreflinkhref="printShou.css" rel="stylesheet"type="text/css" media="print"/>  
  7.               <scripttypescripttype="text/javascript"src="jquery-1.7.2.js"></script>  
  8.               <scripttypescripttype="text/javascript"src="jquery.jqprint-0.3.js"></script>  
  9.               <scripttypescripttype="text/javascript">  
  10.                      $(function()  
  11.                      {  
  12.                             $("#btn1").click(function()  
  13.                             {  
  14.                                    $("#visaReport").jqprint({});  
  15.                             });  
  16.                      });  
  17.               </script>  
  18.        </head>  
  19.    
  20.        <body>  
  21.               <input type="button"id="btn1" value="打印"/>  
  22.               <divclassdivclass="visaReport" id="visaReport">  
  23.                      <divclassdivclass="visa_head">  
  24.                             <divclassdivclass="visa_head_title">XX中心</div>  
  25.                             <divclassdivclass="visa_head_title">確認及收據</div>  
  26.                      </div>  
  27.                      <divclassdivclass="visa_body">  
  28.                             <div>  
  29.                                    <divclassdivclass="visa_person">  
  30.                                              
  31.                                            <div class="visa_label">姓名:xiaoming</div>  
  32.                                            
  33.                                            <div class="visa_label">日期:2014/12/30</div>  
  34.                                    </div>  
  35.                              
  36.                                    <tableclasstableclass="visa_fee">  
  37.                                           <tr>  
  38.                                                  <td>項</td><td>價格</td>  
  39.                                           </tr>  
  40.                                           <tr>  
  41.                                                  <td>服務費</td><td>119.00RMB</td>  
  42.                                           </tr>  
  43.                                           <tr>  
  44.                                                  <td>快遞費</td><td>130.00R</td>  
  45.                                           </tr>  
  46.                                    </table>  
  47.                                    <tableclasstableclass="visa_total_fee">  
  48.                                           <tr>  
  49.                                                  <tdstyletdstyle="width:207px;">Total/總計</td><td>240.00RMB</td>  
  50.                                           </tr>  
  51.                                    </table>  
  52.                             </div>                    
  53.                      </div>  
  54.               </div>  
  55.    
  56.        </body>  
  57. </html>  

 

現在網頁中的頁面的樣式是這樣的：

 

而打印出來的效果確是第一張圖的樣式，這就是指定了media=print這個屬性之后，打印的時候會加載一個css文件所配置的。如下所示：

 

[html]  view plain  copy
 
 print?
  1. <link href="printShou.css" rel="stylesheet"type="text/css" media="print"/>  

 

jqprint這個插件能夠解決我們大部分開發中，Web頁面打印的問題，打印的樣式也是可控的。有時需要我們要為其指定一些屬性，才能完成需要的效果默認是有如下的四個屬性：

 

[javascript]  view plain  copy
 
 print?
  1. {  
  2.               debug: false,//如果是true則可以顯示iframe查看效果（iframe默認高和寬都很小，可以再源碼中調大），默認是false  
  3.               importCSS: true, //true表示引進原來的頁面的css，默認是true。（如果是true，先會找$("link[media=print]")，若沒有會去找$("link")中的css文件）  
  4.               printContainer: true,//表示如果原來選擇的對象必須被納入打印（注意：設置為false可能會打破你的CSS規則）。  
  5.               operaSupport: true//表示如果插件也必須支持歌opera瀏覽器，在這種情況下，它提供了建立一個臨時的打印選項卡。默認是true  
  6. }  

 

 

如果在項目的開發中，不是要求太高的化，我想通過這個插件可以解決我們目前遇到的一些打印的問題。這個插件的操作也是特別的簡單的，通過這個插件，大部分的 頁面，我們都可以按照想要的樣式打印出來。


免責聲明！

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



猜您在找 使用jqprint插件實現打印頁面內容 Jqprint 輕量級頁面打印插件 Jqprint實現頁面打印 Jqprint實現頁面打印 JQPRINT-不錯的jquery打印插件 JQPRINT-不錯的jquery打印插件 jquery打印頁面（jquery.jqprint） jQuery-jqprint.js打印插件使用高版本jQuery時問題 chrome瀏覽器使用jqprint插件打印時偶爾空白頁問題 Jquery插件jqprint-0.3.js實現打印
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM