web的各種前端打印方法之jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁打印
更新時(shí)間: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">
這個(gè)是打印時(shí)顯示的。
</div>
<div class="my_hidden">
這個(gè)是打印時(shí)隱藏的。
</div>
<input type="button" id="print"/>
javascript代碼:
$(document).ready(function(){
$("#print").click(function(){
$(".my_show").printArea();
});
});
這個(gè)插件還提供了一些參數(shù)可配置,使用的方法:$(element).printArea(option).
這個(gè)方法我自己沒有用過,大家嘗試是,有問題的留言哈。
參數(shù)設(shè)置:
1.mode:模式,當(dāng)點(diǎn)擊打印按鈕時(shí)觸發(fā)模式,默認(rèn)為iframe,當(dāng)設(shè)置為popup則會(huì)新開一個(gè)窗口頁面打印。
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">
這個(gè)是打印時(shí)顯示的。
</div>
<div class="my_hidden">
這個(gè)是打印時(shí)隱藏的。
</div>
<input type="button" id="print"/>
javascript代碼:
復(fù)制代碼 代碼如下:
$(document).ready(function(){
$("#print").click(function(){
$(".my_show").printArea();
});
});
這個(gè)插件還提供了一些參數(shù)可配置,使用的方法:$(element).printArea(option).
這個(gè)方法我自己沒有用過,大家嘗試是,有問題的留言哈。
參數(shù)設(shè)置:
1.mode:模式,當(dāng)點(diǎn)擊打印按鈕時(shí)觸發(fā)模式,默認(rèn)為iframe,當(dāng)設(shè)置為popup則會(huì)新開一個(gè)窗口頁面打印。
2.popTitle:設(shè)置新開窗口的標(biāo)題,默認(rèn)為空。
3.popClose:完成打印后是否關(guān)閉窗口,默認(rèn)為false。
相關(guān)文章
jQuery mobile在頁面加載時(shí)添加加載中效果 document.ready 和window.onload執(zhí)行順序
這篇文章主要介紹了jQuery mobile在頁面加載時(shí)添加加載中效果 document.ready 和window.onload執(zhí)行順序比較,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07使用FlexiGrid實(shí)現(xiàn)Extjs表格效果方法分享
這篇文章主要分享了使用FlexiGrid實(shí)現(xiàn)Extjs表格效果方法,非常的實(shí)用,這里推薦給有相同需求的小伙伴2014-12-12jquery左邊浮動(dòng)到一定位置時(shí)顯示返回頂部按鈕
這篇文章主要介紹通過jquery實(shí)現(xiàn)左邊浮動(dòng)到一定位置時(shí)顯示返回頂部按鈕的效果,需要的朋友可以參考下2014-06-06jQuery插件開發(fā)精品教程讓你的jQuery提升一個(gè)臺(tái)階
這篇文章主要介紹了jQuery插件開發(fā)精品教程讓你的jQuery提升一個(gè)臺(tái)階 的相關(guān)資料,需要的朋友可以參考下2016-01-01jQuery 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庫檢測(cè)url絕對(duì)地址和相對(duì)地址的方法
這篇文章主要介紹了使用jQuery mobile庫監(jiān)測(cè)絕對(duì)地址和相對(duì)地址的方法,分別是isAbsoluteUrl()和isRelativeUrl()方法的使用,需要的朋友可以參考下2015-12-12使用jQuery實(shí)現(xiàn)動(dòng)態(tài)添加小廣告
下面小編就為大家?guī)硪黄褂胘Query實(shí)現(xiàn)動(dòng)態(tài)添加小廣告。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07jQuery實(shí)現(xiàn)隔行變色的方法分析(對(duì)比原生JS)
這篇文章主要介紹了jQuery實(shí)現(xiàn)隔行變色的方法,結(jié)合實(shí)例形式對(duì)比原生JS實(shí)現(xiàn)隔行變色的相關(guān)技巧,給出了2種jQuery實(shí)現(xiàn)隔行變色的方法,需要的朋友可以參考下2016-11-11