最近開發過程當中遇到了js局部打印的功能,在網上找相關的資料,最終找到了juery.jqprint-0.3.jsjavascript
和jquery.PrintArea.js兩種。css
最初使用的是jquery.jqprint-0.3.js,是在彈窗的狀況下使用,即便出現滾動條也依然可以把全部內容成功打印出來。可是若是在當前頁面div中出現滾動條(div內容過多,出現垂直滾動條)的話,則內容打印不全。因此最終選擇的的是jquery.PrintArea.js。這是我如今發現的最明顯的區別。java
這兩個都是打印指定div內的顯示內容。jquery
jquery.PrintArea.js瀏覽器
代碼
ide
<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。spa
jquery.jqprint-0.3.js插件
代碼debug
<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對象