歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> 借助jQuery Jqprint實現網頁打印功能

借助jQuery Jqprint實現網頁打印功能

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

今天利用閒余時間研究了一下jQuery Jqprint插件,使用該Jquery腳本可以輕而易舉的實現打印網頁指定區域內容的功能:

例子一:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery Jqprint打印控件演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" src="./js/jquery-1.6.2.js"></script>
<script language="javascript" src="./js/jquery.jqprint-0.3.js"></script>
<style type="text/css">
html,body{margin:auto 15%;padding:0;}
p{line-height: 18px;}
</style>
<script language="javascript">
function print(){
$("#printContainer").jqprint();
}
</script>
</head>
<body>
<div id="printContainer">
<center><p >報任安書</p></center>
<p>&nbsp;&nbsp;&nbsp;&nbsp;太史公牛馬走司馬遷再拜言。少卿足下:曩者辱賜書,教以慎於接物,推賢進士為務。意氣勤勤懇懇,若望僕不相師,而用流俗人之言。僕非敢如是也。請略陳固陋。阙然久不報,幸勿為過。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;僕之先人,非有剖符丹書之功,文史星歷,近乎卜祝之間,固主上所戲弄,倡優畜之,流俗之所輕也。假令僕伏法受誅,若九牛亡一毛,與蝼蟻何以異?而世又不與能死節者比,特以為智窮罪極,不能自免,卒就死耳。何也?素所自樹立使然。人固有一死,或重於泰山,或輕於鴻毛,用之所趨異也。太上不辱先,其次不辱身,其次不辱理色,其次不辱辭令,其次诎體受辱,其次易服受辱,其次關木索、被棰楚受辱,其次剔毛發、嬰金鐵受辱,其次毀肌膚、斷肢體受辱,最下腐刑極矣!傳曰:“刑不上大夫。”此言士節不可不勉勵也。猛虎處深山,百獸震恐,及在穽檻之中,搖尾而求食,積威約之漸也。故士有畫地為牢,勢不入;削木為吏,議不對,定計於鮮也。今交手足,受木索,暴肌膚,受榜棰,幽於圜牆之中。當此之時,見獄吏則頭槍地,視徒隸則心惕息。何者?積威約之勢也。及以至是,言不辱者,所謂強顏耳,曷足貴乎!且西伯,伯也,拘於羑裡;李斯,相也,具於五刑;淮陰,王也,受械於陳;彭越、張敖,南向稱孤,系獄具罪;绛侯誅諸呂,權傾五伯,囚於請室;魏其,大將也,衣赭衣、關三木;季布為朱家鉗奴;灌夫受辱居室。此人皆身至王侯將相,聲聞鄰國,及罪至罔加,不能引決自裁,在塵埃之中,古今一體,安在其不辱也!此言之,勇怯,勢也;強弱,形也。審矣,何足怪乎?且人不能早自裁繩墨之外,已稍陵遲,至於鞭棰之間,乃欲引節,斯不亦遠乎!古人所以重施刑於大夫者,殆為此也。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;夫人情莫不貪生惡死,念親戚,顧妻子;至激於義理者不然,乃有所不得已也。今僕不幸,早失父母,無兄弟之親,獨身孤立,少卿視僕於妻子何如哉?且勇者不必死節,怯夫慕義,何處不勉焉!僕雖怯懦,欲苟活,亦頗識去就之分矣,何至自沉溺累绁之辱哉!且夫臧獲婢妾,猶能引決,況若僕之不得已乎?所以隱忍苟活,幽於糞土之中而不辭者,恨私心有所不盡,鄙陋沒世,而文采不表於後也。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;古者富貴而名摩滅,不可勝記,唯倜傥非常之人稱焉。蓋西伯拘而演《周易》;仲尼厄而作《春秋》;屈原放逐,乃賦《離騷》;左丘失明,厥有《國語》;孫子膑腳,《兵法》修列;不韋遷蜀,世傳《呂覽》;韓非囚秦,《說難》、《孤憤》;《詩》三百篇,大底聖賢發憤之所為作也。此人皆意有所郁結,不得通其道,故述往事,思來者。乃如左丘無目,孫子斷足,終不可用,退而論書策,以舒其憤,思垂空文以自見。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;僕竊不遜,近自托於無能之辭,網羅天下放失舊聞,略考其行事,綜其終始,稽其成敗興壞之紀。上計軒轅,下至於茲,為十表、本紀十二、書八章、世家三十、列傳七十,凡百三十篇。亦欲以究天人之際,通古今之變,成一家之言。草創未就,會遭此禍,惜其不成,是以就極刑而無愠色。僕誠已著此書,藏之名山,傳之其人,通邑大都。則僕償前辱之責,雖萬被戮,豈有悔哉!然此可為智者道,難為俗人言也。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;且負下未易居,下流多謗議。僕以口語遇遭此禍,重為鄉黨所笑,以污辱先人,亦何面目復上父母之丘墓乎?雖累百世,垢彌甚耳!是以腸一日而九回,居則忽忽若有所亡,出則不知其所往。每念斯恥,汗未嘗不發背沾衣也。身直為閨合之臣,寧得自引深藏於巖穴邪?故且從俗浮沉,與時俯仰,通其狂惑。今少卿乃教以推賢進士,無乃與僕私心剌謬乎?今雖欲自雕琢,曼辭以自飾,無益於俗,不信,適足取辱耳。要之死日,然後是非乃定。書不能悉意,略陳固陋。謹再拜。</p>
</div>
<center><input type="button" onclick="print()" value="打印文章"/></center>
</body>
</html>

例子二:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery Jqprint打印控件演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" src="./js/jquery-1.6.2.js"></script>
<script language="javascript" src="./js/jquery.jqprint-0.3.js"></script>
<style type="text/css">
html,body{margin:auto 15%;padding:0;}
p{line-height: 18px;}
</style>
<script language="javascript">
function print(){
$("#printContainer").jqprint({
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
});
}
</script>
</head>
<body>
<div id="printContainer">
<center><p >報任安書</p></center>
<p>&nbsp;&nbsp;&nbsp;&nbsp;太史公牛馬走司馬遷再拜言。少卿足下:曩者辱賜書,教以慎於接物,推賢進士為務。意氣勤勤懇懇,若望僕不相師,而用流俗人之言。僕非敢如是也。請略陳固陋。阙然久不報,幸勿為過。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;僕之先人,非有剖符丹書之功,文史星歷,近乎卜祝之間,固主上所戲弄,倡優畜之,流俗之所輕也。假令僕伏法受誅,若九牛亡一毛,與蝼蟻何以異?而世又不與能死節者比,特以為智窮罪極,不能自免,卒就死耳。何也?素所自樹立使然。人固有一死,或重於泰山,或輕於鴻毛,用之所趨異也。太上不辱先,其次不辱身,其次不辱理色,其次不辱辭令,其次诎體受辱,其次易服受辱,其次關木索、被棰楚受辱,其次剔毛發、嬰金鐵受辱,其次毀肌膚、斷肢體受辱,最下腐刑極矣!傳曰:“刑不上大夫。”此言士節不可不勉勵也。猛虎處深山,百獸震恐,及在穽檻之中,搖尾而求食,積威約之漸也。故士有畫地為牢,勢不入;削木為吏,議不對,定計於鮮也。今交手足,受木索,暴肌膚,受榜棰,幽於圜牆之中。當此之時,見獄吏則頭槍地,視徒隸則心惕息。何者?積威約之勢也。及以至是,言不辱者,所謂強顏耳,曷足貴乎!且西伯,伯也,拘於羑裡;李斯,相也,具於五刑;淮陰,王也,受械於陳;彭越、張敖,南向稱孤,系獄具罪;绛侯誅諸呂,權傾五伯,囚於請室;魏其,大將也,衣赭衣、關三木;季布為朱家鉗奴;灌夫受辱居室。此人皆身至王侯將相,聲聞鄰國,及罪至罔加,不能引決自裁,在塵埃之中,古今一體,安在其不辱也!此言之,勇怯,勢也;強弱,形也。審矣,何足怪乎?且人不能早自裁繩墨之外,已稍陵遲,至於鞭棰之間,乃欲引節,斯不亦遠乎!古人所以重施刑於大夫者,殆為此也。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;夫人情莫不貪生惡死,念親戚,顧妻子;至激於義理者不然,乃有所不得已也。今僕不幸,早失父母,無兄弟之親,獨身孤立,少卿視僕於妻子何如哉?且勇者不必死節,怯夫慕義,何處不勉焉!僕雖怯懦,欲苟活,亦頗識去就之分矣,何至自沉溺累绁之辱哉!且夫臧獲婢妾,猶能引決,況若僕之不得已乎?所以隱忍苟活,幽於糞土之中而不辭者,恨私心有所不盡,鄙陋沒世,而文采不表於後也。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;古者富貴而名摩滅,不可勝記,唯倜傥非常之人稱焉。蓋西伯拘而演《周易》;仲尼厄而作《春秋》;屈原放逐,乃賦《離騷》;左丘失明,厥有《國語》;孫子膑腳,《兵法》修列;不韋遷蜀,世傳《呂覽》;韓非囚秦,《說難》、《孤憤》;《詩》三百篇,大底聖賢發憤之所為作也。此人皆意有所郁結,不得通其道,故述往事,思來者。乃如左丘無目,孫子斷足,終不可用,退而��書策,以舒其憤,思垂空文以自見。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;僕竊不遜,近自托於無能之辭,網羅天下放失舊聞,略考其行事,綜其終始,稽其成敗興壞之紀。上計軒轅,下至於茲,為十表、本紀十二、書八章、世家三十、列傳七十,凡百三十篇。亦欲以究天人之際,通古今之變,成一家之言。草創未就,會遭此禍,惜其不成,是以就極刑而無愠色。僕誠已著此書,藏之名山,傳之其人,通邑大都。則僕償前辱之責,雖萬被戮,豈有悔哉!然此可為智者道,難為俗人言也。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;且負下未易居,下流多謗議。僕以口語遇遭此禍,重為鄉黨所笑,以污辱先人,亦何面目復上父母之丘墓乎?雖累百世,垢彌甚耳!是以腸一日而九回,居則忽忽若有所亡,出則不知其所往。每念斯恥,汗未嘗不發背沾衣也。身直為閨合之臣,寧得自引深藏於巖穴邪?故且從俗浮沉,與時俯仰,通其狂惑。今少卿乃教以推賢進士,無乃與僕私心剌謬乎?今雖欲自雕琢,曼辭以自飾,無益於俗,不信,適足取辱耳。要之死日,然後是非乃定。書不能悉意,略陳固陋。謹再拜。</p>
</div>
<center><input type="button" onclick="print()" value="打印文章"/></center>
</body>
</html>

說明:上面兩個例子都需要jquery-1.6.2.js和1jquery.jqprint-0.3.js兩個文件,這兩個文件可以在下面的下載資源中找到,經測試,該打印插件可以支持所有主流浏覽器。

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

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2014年資料/8月/12日/借助jQuery Jqprint實現網頁打印功能/

下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm

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

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