web的各種前端打印方法之jquery打印插件jqprint實(shí)現(xiàn)網(wǎng)頁(yè)打印
更新時(shí)間:2013年01月09日 16:37:38 作者:
本文介紹JQuery插件Jqprint實(shí)現(xiàn)網(wǎng)頁(yè)打印,不懂的同學(xué)正可借此機(jī)會(huì)學(xué)習(xí)下,以備不時(shí)之需,話不多說,切入主題
web的打印方法具我自己懂得知道的有:
1、JQuery插件Jqprint實(shí)現(xiàn)
2、JQery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁(yè)打印
3、CSS控制網(wǎng)頁(yè)打印樣式
JQuery插件Jqprint實(shí)現(xiàn):
首先要導(dǎo)入js文件:
jquery.jqprint.js下載
<script language="javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript" src="jquery.jqprint.js"></script>html代碼:
<div class="my_show">
這個(gè)打印時(shí)是顯示的
</div>
<div class="my_hidden">
這個(gè)打印時(shí)是隱藏的。
</div>
<input type="button" id="print"/>
javascript代碼:
<script type="text/javascript">
$(document).ready(function() {
$("#print").click(function(){
$(".my_show").jqprint();
})
});
</script>
該插件還提供了一些參數(shù)可配置:
debug: false,//如果是true則可以顯示iframe查看效果(iframe默認(rèn)高和寬都很小,可以再源碼中調(diào)大),默認(rèn)是false
importCSS: true, //true表示引進(jìn)原來的頁(yè)面的css,默認(rèn)是true。(如果是true,先會(huì)找$(“l(fā)ink[media=print]“),若沒有會(huì)去找$(“l(fā)ink”)中的css文件)
printContainer: true,//表示如果原來選擇的對(duì)象必須被納入打?。ㄗ⒁猓涸O(shè)置為false可能會(huì)打破你的CSS規(guī)則)。
operaSupport: true//表示如果插件也必須支持歌opera瀏覽器,在這種情況下,它提供了建立一個(gè)臨時(shí)的打印選項(xiàng)卡。默認(rèn)是true
而我自己使用到的只有importCSS:原始頁(yè)面中的鏈接將導(dǎo)入到 iframe。第一次它媒體 searchs = 打印,如果沒有,將導(dǎo)入的正常的 css 文件。
importCSS示例:
$('.my_show').jqprint({
importCSS://CSS樣式文件
});
1、JQuery插件Jqprint實(shí)現(xiàn)
2、JQery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁(yè)打印
3、CSS控制網(wǎng)頁(yè)打印樣式
JQuery插件Jqprint實(shí)現(xiàn):
首先要導(dǎo)入js文件:
jquery.jqprint.js下載
復(fù)制代碼 代碼如下:
<script language="javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript" src="jquery.jqprint.js"></script>html代碼:
復(fù)制代碼 代碼如下:
<div class="my_show">
這個(gè)打印時(shí)是顯示的
</div>
<div class="my_hidden">
這個(gè)打印時(shí)是隱藏的。
</div>
<input type="button" id="print"/>
javascript代碼:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(document).ready(function() {
$("#print").click(function(){
$(".my_show").jqprint();
})
});
</script>
該插件還提供了一些參數(shù)可配置:
debug: false,//如果是true則可以顯示iframe查看效果(iframe默認(rèn)高和寬都很小,可以再源碼中調(diào)大),默認(rèn)是false
importCSS: true, //true表示引進(jìn)原來的頁(yè)面的css,默認(rèn)是true。(如果是true,先會(huì)找$(“l(fā)ink[media=print]“),若沒有會(huì)去找$(“l(fā)ink”)中的css文件)
printContainer: true,//表示如果原來選擇的對(duì)象必須被納入打?。ㄗ⒁猓涸O(shè)置為false可能會(huì)打破你的CSS規(guī)則)。
operaSupport: true//表示如果插件也必須支持歌opera瀏覽器,在這種情況下,它提供了建立一個(gè)臨時(shí)的打印選項(xiàng)卡。默認(rèn)是true
而我自己使用到的只有importCSS:原始頁(yè)面中的鏈接將導(dǎo)入到 iframe。第一次它媒體 searchs = 打印,如果沒有,將導(dǎo)入的正常的 css 文件。
importCSS示例:
復(fù)制代碼 代碼如下:
$('.my_show').jqprint({
importCSS://CSS樣式文件
});
相關(guān)文章
jQuery實(shí)現(xiàn)的回車觸發(fā)按鈕事件功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的回車觸發(fā)按鈕事件功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-03-03jQuery彈出層后禁用底部滾動(dòng)條(移動(dòng)端關(guān)閉回到原位置)
這篇文章主要介紹了jQuery彈出層后禁用底部滾動(dòng)條(移動(dòng)端關(guān)閉回到原位置)的關(guān)鍵代碼,非常不錯(cuò),代碼簡(jiǎn)單易懂,需要的朋友可以參考下2016-08-08Jquery中給animation加更多的運(yùn)作效果實(shí)例
這篇文章介紹了Jquery中給animation加更多的運(yùn)作效果實(shí)例,有需要的朋友可以參考一下2013-09-09用Jquery重寫windows.alert方法實(shí)現(xiàn)思路
本文將介紹下用Jquery重寫windows.alert方法,已經(jīng)在 IE8 , firefox3.0.11下面測(cè)試通過,喜歡的朋友可以放心使用2013-04-04jQuery教程 $()包裝函數(shù)來實(shí)現(xiàn)數(shù)組元素分頁(yè)效果
最近一周在做中文站搜索禮品widget的需求,這個(gè)需求中有一個(gè)分頁(yè)的功能2013-08-08實(shí)例詳解jQuery Mockjax 插件模擬 Ajax 請(qǐng)求
這篇文章主要介紹了實(shí)例詳解jQuery Mockjax 插件模擬 Ajax 請(qǐng)求的相關(guān)資料,需要的朋友可以參考下2016-01-01詳解jQuery的表單驗(yàn)證插件--Validation
jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能,讓客戶端表單驗(yàn)證變得更簡(jiǎn)單,同時(shí)提供了大量的定制選項(xiàng),滿足應(yīng)用程序各種需求。本文主要對(duì)表單驗(yàn)證插件-Validation進(jìn)行案例分析,詳細(xì)介紹,具有很好的參考價(jià)值,需要的朋友一起來看下吧2016-12-12js實(shí)現(xiàn)圖片放大縮小功能后進(jìn)行復(fù)雜排序的方法
這是一個(gè)基于jquery的圖片效果,它的作用是:當(dāng)圖片點(diǎn)擊變大(變小)時(shí),其它圖片按照一定的規(guī)則進(jìn)行排序運(yùn)動(dòng)2012-11-11