歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> jQuery 網頁局部打印總結

jQuery 網頁局部打印總結

日期:2017/3/1 9:40:13   编辑:Linux編程

最近開發過程中遇到了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

------------------------------------------分割線------------------------------------------

jQuery權威指南 PDF版中文+配套源代碼 http://www.linuxidc.com/Linux/2013-10/91059.htm

jQuery實戰 中文PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90631.htm

《jQuery即學即用(雙色)》 PDF+源代碼 http://www.linuxidc.com/Linux/2013-09/90383.htm

鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm

jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm

jQuery基礎教程(第4版) PDF 完整高清版+配套源碼 http://www.linuxidc.com/Linux/2014-03/98162.htm

--------------------------------------分割線 --------------------------------------

jQuery 的詳細介紹:請點這裡
jQuery 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved