借助Jquery Jqprint实现网页打印功能

今天利用闲余时间研究了一下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两个文件,这两个文件可以在下面的下载资源中找到,经测试,该打印插件可以支持所有主流浏览器。

0分下载资源

借助Jquery Jqprint实现网页打印功能,布布扣,bubuko.com

时间: 2024-10-13 08:41:35

借助Jquery Jqprint实现网页打印功能的相关文章

jqprint的网页打印,打印预览可以包含图片

自己负责的模块需要有个试卷打印的功能,需要将网页特定范围内的内容打印出来,所以选择了jquery.jqprint脚本 用起来也非常简单. //打印    $("#printPage").jqprint({        debug: false,//如果是true则可以显示iframe查看效果,默认是false         importCSS: true,//true表示引进原来的页面的css,默认是true.        printContainer: true,//表示如果原

jquery.jqprint-0.3.js打印功能 以及页眉页脚设置显示与否

项目中需要打印 搜索使用了jquery.jqprint-0.3.js 遇到一些样式问题,现在已经解决 ,记录下来供大家参考. 下面图显示为我页面中的样式 打印需要一列显示,解决办法就是写到行内元素上,页面显示写到页面style样式中 下面为谷歌显示的打印效果,可以勾除页眉页脚设置 火狐浏览器需要这样设置页眉页脚 打印-->页面设置  设置完以后打印效果一样 原文地址:https://www.cnblogs.com/wdd-cindy/p/9151089.html

Jqprint 轻量级页面打印插件

最近公司项目用到了页面打印功能,不能不承认,JQ的这个打印插件很小巧功能很强大 1.首先需要引入必须的js文件 <script language="javascript" src="jquery-1.4.4.min.js"></script><script language="javascript" src="jquery.jqprint-0.3.js"></script> 2.

网页打印A4纸-----表格在跨页时自动换页打印的实现 (转)

在最近所做的一个项目中,需要通过网页来打印不少的表单,但是又不想每个打印页签各占用一个页面,这样就需要生存很多不同的冗余页面,为了减少冗余,所有的表单通过jquery的页签tab来实现的. 一 :基本打印的实现: 1:tab页签在切换时的change事件中,记住每个页签的index, 2:在点击打印按钮时,根据所记住的index,由页签的id("tab名+index"组成),获取当前tab页签下所有的html; 3: 将获取到的需要打印页签的html赋值给document.body.i

jquery实现替代iframe的功能

原文:jquery实现替代iframe的功能 使用iframe能很好的嵌入其他的网页或者网站,但是iframe每次加载都会浪费好多的时间,且会阻止其他元素的加载,搜索引擎也不能识别页面ifram框架中被调用的链接.文本.图片等等内容的. Html代码 <ul class="list-side"> <li><a target="a.html" >about</a></li> <li><a t

web打印功能

1.http://www.jb51.net/article/38083.htm 2. <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    </head><body>    <form id="form1" runat="server&quo

【JS】通过JS实现超市小票打印功能——ActiveX控件

应客户的需求= = ,要在网页端实现打印小票的功能 先来一张打印出的小票效果图(合计明显不对,因为有修改订单功能,请各位忽略) 用什么方法实现呢:我想应该是有三种吧 1.用第三方的浏览器控件(这个好似比较方便,我的老师也是这样建议我)向大家推荐一个 Lodop打印控件 2.用CSS写好模板,然后直接用页面打印的方法(应该是这样吧) (以上两种还没有尝试,这两天陆续尝试) 3.用微软自己的ActiveX控件(ActiveX控件可以实现调用本地的文件等操作(之前试过调用cmd,实现shutdown

web网页打印的方法(浏览器通用)

Web打印组件jatoolsPrinter 应用web化,不论对开发商,还是对用户来说,实在是一种很经济的选择,因为基于 web的应用,客户端的规则很简单,容易学习,容易维护,容易发布.但对程序员来说,因为浏览器的局限性,却要面对很多挑战.怎么样来进行基于web的套 打,就是这么一个令多数程序员头痛不已的问题. 基于web的套打,难度在于要将浏览器中呈现的html,精确地打印到票据中,而且能够实现对分页位置的控制.下面就ie浏览器所能采用的套打解决方案,来个汇总分析,希望对大家有所帮助. jat

js实现网页打印分页打印

web打印思路:html页面本身带有打印功能window.print() 但是在打印时又不能word模板的要求来打印不能满足打印需求.同时我们打印的数据有时候是动态变化的需要按模板来打印我的处理方式是:1.按照word模板设计一个html页面模板,html页面包含了你所要输出的标签 例如:{名字}{时间} 打印区域,不打印区域,分页标签等 2.编写一个公用的打印类,传入参数使按照模板生成相应的数据,生成一个html页并显示. 3.打印 第一种方法:指定不打印区域比如页面的打印按钮等 使用CSS,