web的各種前端打印方法之jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁打印
更新時間:2013年01月09日 16:25:30 作者:
jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁打印,不可思議吧,接下來為您介紹它的使用方法及操作步驟,感興趣的朋友可以了解下
第一步:
jquery.PrintArea.js下載
js引用
<script language="javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.PrintArea.js"></script>
html引用:
<div class="my_show">
這個是打印時顯示的。
</div>
<div class="my_hidden">
這個是打印時隱藏的。
</div>
<input type="button" id="print"/>
javascript代碼:
$(document).ready(function(){
$("#print").click(function(){
$(".my_show").printArea();
});
});
這個插件還提供了一些參數(shù)可配置,使用的方法:$(element).printArea(option).
這個方法我自己沒有用過,大家嘗試是,有問題的留言哈。
參數(shù)設(shè)置:
1.mode:模式,當(dāng)點(diǎn)擊打印按鈕時觸發(fā)模式,默認(rèn)為iframe,當(dāng)設(shè)置為popup則會新開一個窗口頁面打印。
2.popTitle:設(shè)置新開窗口的標(biāo)題,默認(rèn)為空。
3.popClose:完成打印后是否關(guān)閉窗口,默認(rèn)為false。
jquery.PrintArea.js下載
js引用
復(fù)制代碼 代碼如下:
<script language="javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.PrintArea.js"></script>
html引用:
復(fù)制代碼 代碼如下:
<div class="my_show">
這個是打印時顯示的。
</div>
<div class="my_hidden">
這個是打印時隱藏的。
</div>
<input type="button" id="print"/>
javascript代碼:
復(fù)制代碼 代碼如下:
$(document).ready(function(){
$("#print").click(function(){
$(".my_show").printArea();
});
});
這個插件還提供了一些參數(shù)可配置,使用的方法:$(element).printArea(option).
這個方法我自己沒有用過,大家嘗試是,有問題的留言哈。
參數(shù)設(shè)置:
1.mode:模式,當(dāng)點(diǎn)擊打印按鈕時觸發(fā)模式,默認(rèn)為iframe,當(dāng)設(shè)置為popup則會新開一個窗口頁面打印。
2.popTitle:設(shè)置新開窗口的標(biāo)題,默認(rèn)為空。
3.popClose:完成打印后是否關(guān)閉窗口,默認(rèn)為false。
相關(guān)文章
jQuery mobile在頁面加載時添加加載中效果 document.ready 和window.onload執(zhí)行順序
這篇文章主要介紹了jQuery mobile在頁面加載時添加加載中效果 document.ready 和window.onload執(zhí)行順序比較,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07
使用FlexiGrid實(shí)現(xiàn)Extjs表格效果方法分享
這篇文章主要分享了使用FlexiGrid實(shí)現(xiàn)Extjs表格效果方法,非常的實(shí)用,這里推薦給有相同需求的小伙伴2014-12-12
jQuery插件開發(fā)精品教程讓你的jQuery提升一個臺階
這篇文章主要介紹了jQuery插件開發(fā)精品教程讓你的jQuery提升一個臺階 的相關(guān)資料,需要的朋友可以參考下2016-01-01
jQuery HTML css()方法與css類實(shí)例詳解
這篇文章主要介紹了jQuery HTML css()方法與css類,結(jié)合實(shí)例形式詳細(xì)分析了jQuery HTML css()方法與css類相關(guān)函數(shù)用法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
使用jQuery mobile庫檢測url絕對地址和相對地址的方法
這篇文章主要介紹了使用jQuery mobile庫監(jiān)測絕對地址和相對地址的方法,分別是isAbsoluteUrl()和isRelativeUrl()方法的使用,需要的朋友可以參考下2015-12-12
使用jQuery實(shí)現(xiàn)動態(tài)添加小廣告
下面小編就為大家?guī)硪黄褂胘Query實(shí)現(xiàn)動態(tài)添加小廣告。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
jQuery實(shí)現(xiàn)隔行變色的方法分析(對比原生JS)
這篇文章主要介紹了jQuery實(shí)現(xiàn)隔行變色的方法,結(jié)合實(shí)例形式對比原生JS實(shí)現(xiàn)隔行變色的相關(guān)技巧,給出了2種jQuery實(shí)現(xiàn)隔行變色的方法,需要的朋友可以參考下2016-11-11

