Jquery Jqprint—藉助Jquery Jqprint實現網頁列印功能
阿新 • • 發佈：2019-01-03
今天利用閒餘時間研究了一下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 style="font-size: 21pt;font-weight: bold;">報任安書</p></center> <p> 太史公牛馬走司馬遷再拜言。少卿足下：曩者辱賜書，教以慎於接物，推賢進士為務。意氣勤勤懇懇，若望僕不相師，而用流俗人之言。僕非敢如是也。請略陳固陋。闕然久不報，幸勿為過。</p> <p> 僕之先人，非有剖符丹書之功，文史星曆，近乎卜祝之間，固主上所戲弄，倡優畜之，流俗之所輕也。假令僕伏法受誅，若九牛亡一毛，與螻蟻何以異？而世又不與能死節者比，特以為智窮罪極，不能自免，卒就死耳。何也？素所自樹立使然。人固有一死，或重於泰山，或輕於鴻毛，用之所趨異也。太上不辱先，其次不辱身，其次不辱理色，其次不辱辭令，其次詘體受辱，其次易服受辱，其次關木索、被棰楚受辱，其次剔毛髮、嬰金鐵受辱，其次毀肌膚、斷肢體受辱，最下腐刑極矣！傳曰：“刑不上大夫。”此言士節不可不勉勵也。猛虎處深山，百獸震恐，及在穽檻之中，搖尾而求食，積威約之漸也。故士有畫地為牢，勢不入；削木為吏，議不對，定計於鮮也。今交手足，受木索，暴肌膚，受榜棰，幽於圜牆之中。當此之時，見獄吏則頭槍地，視徒隸則心惕息。何者？積威約之勢也。及以至是，言不辱者，所謂強顏耳，曷足貴乎！且西伯，伯也，拘於羑里；李斯，相也，具於五刑；淮陰，王也，受械於陳；彭越、張敖，南向稱孤，繫獄具罪；絳侯誅諸呂，權傾五伯，囚於請室；魏其，大將也，衣赭衣、關三木；季布為朱家鉗奴；灌夫受辱居室。此人皆身至王侯將相，聲聞鄰國，及罪至罔加，不能引決自裁，在塵埃之中，古今一體，安在其不辱也！此言之，勇怯，勢也；強弱，形也。審矣，何足怪乎？且人不能早自裁繩墨之外，已稍陵遲，至於鞭棰之間，乃欲引節，斯不亦遠乎！古人所以重施刑于大夫者，殆為此也。</p> <p> 夫人情莫不貪生惡死，念親戚，顧妻子；至激於義理者不然，乃有所不得已也。今僕不幸，早失父母，無兄弟之親，獨身孤立，少卿視僕於妻子何如哉？且勇者不必死節，怯夫慕義，何處不勉焉！僕雖怯懦，欲苟活，亦頗識去就之分矣，何至自沉溺累紲之辱哉！且夫臧獲婢妾，猶能引決，況若僕之不得已乎？所以隱忍苟活，幽於糞土之中而不辭者，恨私心有所不盡，鄙陋沒世，而文采不表於後也。</p> <p> 古者富貴而名摩滅，不可勝記，唯倜儻非常之人稱焉。蓋西伯拘而演《周易》；仲尼厄而作《春秋》；屈原放逐，乃賦《離騷》；左丘失明，厥有《國語》；孫子臏腳，《兵法》修列；不韋遷蜀，世傳《呂覽》；韓非囚秦，《說難》、《孤憤》；《詩》三百篇，大底聖賢發憤之所為作也。此人皆意有所鬱結，不得通其道，故述往事，思來者。乃如左丘無目，孫子斷足，終不可用，退而論書策，以舒其憤，思垂空文以自見。</p> <p> 僕竊不遜，近自託於無能之辭，網羅天下放失舊聞，略考其行事，綜其終始，稽其成敗興壞之紀。上計軒轅，下至於茲，為十表、本紀十二、書八章、世家三十、列傳七十，凡百三十篇。亦欲以究天人之際，通古今之變，成一家之言。草創未就，會遭此禍，惜其不成，是以就極刑而無慍色。僕誠已著此書，藏之名山，傳之其人，通邑大都。則僕償前辱之責，雖萬被戮，豈有悔哉！然此可為智者道，難為俗人言也。</p> <p> 且負下未易居，下流多謗議。僕以口語遇遭此禍，重為鄉黨所笑，以汙辱先人，亦何面目覆上父母之丘墓乎？雖累百世，垢彌甚耳！是以腸一日而九回，居則忽忽若有所亡，出則不知其所往。每念斯恥，汗未嘗不發背沾衣也。身直為閨合之臣，寧得自引深藏於巖穴邪？故且從俗浮沉，與時俯仰，通其狂惑。今少卿乃教以推賢進士，無乃與僕私心剌謬乎？今雖欲自雕琢，曼辭以自飾，無益於俗，不信，適足取辱耳。要之死日，然後是非乃定。書不能悉意，略陳固陋。謹再拜。</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 style="font-size: 21pt;font-weight: bold;">報任安書</p></center> <p> 太史公牛馬走司馬遷再拜言。少卿足下：曩者辱賜書，教以慎於接物，推賢進士為務。意氣勤勤懇懇，若望僕不相師，而用流俗人之言。僕非敢如是也。請略陳固陋。闕然久不報，幸勿為過。</p> <p> 僕之先人，非有剖符丹書之功，文史星曆，近乎卜祝之間，固主上所戲弄，倡優畜之，流俗之所輕也。假令僕伏法受誅，若九牛亡一毛，與螻蟻何以異？而世又不與能死節者比，特以為智窮罪極，不能自免，卒就死耳。何也？素所自樹立使然。人固有一死，或重於泰山，或輕於鴻毛，用之所趨異也。太上不辱先，其次不辱身，其次不辱理色，其次不辱辭令，其次詘體受辱，其次易服受辱，其次關木索、被棰楚受辱，其次剔毛髮、嬰金鐵受辱，其次毀肌膚、斷肢體受辱，最下腐刑極矣！傳曰：“刑不上大夫。”此言士節不可不勉勵也。猛虎處深山，百獸震恐，及在穽檻之中，搖尾而求食，積威約之漸也。故士有畫地為牢，勢不入；削木為吏，議不對，定計於鮮也。今交手足，受木索，暴肌膚，受榜棰，幽於圜牆之中。當此之時，見獄吏則頭槍地，視徒隸則心惕息。何者？積威約之勢也。及以至是，言不辱者，所謂強顏耳，曷足貴乎！且西伯，伯也，拘於羑里；李斯，相也，具於五刑；淮陰，王也，受械於陳；彭越、張敖，南向稱孤，繫獄具罪；絳侯誅諸呂，權傾五伯，囚於請室；魏其，大將也，衣赭衣、關三木；季布為朱家鉗奴；灌夫受辱居室。此人皆身至王侯將相，聲聞鄰國，及罪至罔加，不能引決自裁，在塵埃之中，古今一體，安在其不辱也！此言之，勇怯，勢也；強弱，形也。審矣，何足怪乎？且人不能早自裁繩墨之外，已稍陵遲，至於鞭棰之間，乃欲引節，斯不亦遠乎！古人所以重施刑于大夫者，殆為此也。</p> <p> 夫人情莫不貪生惡死，念親戚，顧妻子；至激於義理者不然，乃有所不得已也。今僕不幸，早失父母，無兄弟之親，獨身孤立，少卿視僕於妻子何如哉？且勇者不必死節，怯夫慕義，何處不勉焉！僕雖怯懦，欲苟活，亦頗識去就之分矣，何至自沉溺累紲之辱哉！且夫臧獲婢妾，猶能引決，況若僕之不得已乎？所以隱忍苟活，幽於糞土之中而不辭者，恨私心有所不盡，鄙陋沒世，而文采不表於後也。</p> <p> 古者富貴而名摩滅，不可勝記，唯倜儻非常之人稱焉。蓋西伯拘而演《周易》；仲尼厄而作《春秋》；屈原放逐，乃賦《離騷》；左丘失明，厥有《國語》；孫子臏腳，《兵法》修列；不韋遷蜀，世傳《呂覽》；韓非囚秦，《說難》、《孤憤》；《詩》三百篇，大底聖賢發憤之所為作也。此人皆意有所鬱結，不得通其道，故述往事，思來者。乃如左丘無目，孫子斷足，終不可用，退而論書策，以舒其憤，思垂空文以自見。</p> <p> 僕竊不遜，近自託於無能之辭，網羅天下放失舊聞，略考其行事，綜其終始，稽其成敗興壞之紀。上計軒轅，下至於茲，為十表、本紀十二、書八章、世家三十、列傳七十，凡百三十篇。亦欲以究天人之際，通古今之變，成一家之言。草創未就，會遭此禍，惜其不成，是以就極刑而無慍色。僕誠已著此書，藏之名山，傳之其人，通邑大都。則僕償前辱之責，雖萬被戮，豈有悔哉！然此可為智者道，難為俗人言也。</p> <p> 且負下未易居，下流多謗議。僕以口語遇遭此禍，重為鄉黨所笑，以汙辱先人，亦何面目覆上父母之丘墓乎？雖累百世，垢彌甚耳！是以腸一日而九回，居則忽忽若有所亡，出則不知其所往。每念斯恥，汗未嘗不發背沾衣也。身直為閨合之臣，寧得自引深藏於巖穴邪？故且從俗浮沉，與時俯仰，通其狂惑。今少卿乃教以推賢進士，無乃與僕私心剌謬乎？今雖欲自雕琢，曼辭以自飾，無益於俗，不信，適足取辱耳。要之死日，然後是非乃定。書不能悉意，略陳固陋。謹再拜。</p> </div> <center><input type="button" onclick="print()" value="列印文章"/></center> </body> </html>
說明：上面兩個例子都需要jquery-1.6.2.js和1jquery.jqprint-0.3.js兩個檔案，這兩個檔案可以在下面的下載資源中找到，經測試，該列印外掛可以支援所有主流瀏覽器。