jquery 網頁局部列印總結

標籤：jquery網頁列印

   最近開發過程中遇到了js局部列印的功能，在網上找相關的資料，最終找到了juery.jqprint-0.3.js

和jquery.PrintArea.js兩種。

   最初使用的是jquery.jqprint-0.3.js，是在彈窗的情況下使用，即使出現捲軸也依然能夠把所有內容成功列印出來。但是如果在當前頁面div中出現捲軸(div內容過多,出現垂直捲軸)的話,則內容列印不全。所以最終選擇的的是jquery.PrintArea.js。這是我現在發現的最明顯的區別。

  這兩個都是列印指定div內的顯示內容。

  jquery.PrintArea.js

  代碼

<script language="javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jquery.PrintArea.js"></script> $(document).ready(function(){     $("#print").click(function(){         $(".my_show").printArea();     }); }); <div class="my_show"> 這個是列印時顯示的。 </div> <div class="my_hidden"> 這個是列印時隱藏的。 </div> <input type="button" id="print"/>

這個外掛程式還提供了一些參數可配置，使用的方法：$（element).printArea(option).
這個方法我自己沒有用過，大家嘗試，有問題的留言哈。

參數設定：
1.mode：模式，當點擊列印按鈕時觸發模式，預設為iframe，當設定為popup則會新開一個視窗頁面列印。
2.popTitle：設定新開視窗的標題，預設為空白。
3.popClose：完成列印後是否關閉視窗，預設為false。

jquery.jqprint-0.3.js

代碼

<script language="javascript" src="jquery-1.7.1.min.js"></script> <script language="javascript" src="jquery.jqprint.js"></script><script type="text/javascript">     $(document).ready(function() {         $("#print").click(function(){             $(".my_show").jqprint();         })     }); </script> <div class="my_show"> 這個列印時是顯示的 </div> <div class="my_hidden"> 這個列印時是隱藏的。 </div> <input type="button" id="print"/>

該外掛程式還提供了一些參數可配置： 
debug: false,//如果是true則可以顯示iframe查看效果（iframe預設高和寬都很小，可以再源碼中調大），預設是false
importCSS: true, //true表示引進原來的頁面的css，預設是true。（如果是true，先會找$(“link[media=print]“)，若沒有會去找$(“link”)中的css檔案）
printContainer: true,//表示如果原來選擇的對象必須被納入列印（注意：設定為false可能會打破你的CSS規則）。
operaSupport: true//表示如果外掛程式也必須支援歌opera瀏覽器，在這種情況下，它提供了建立一個臨時的列印選項卡。預設是true

本文出自 “GUI” 部落格，轉載請與作者聯絡！

jquery 網頁局部列印總結