web的各種前端打印方法之jquery打印插件PrintArea實現(xiàn)網(wǎng)頁打印
更新時間:2013年01月09日 16:25:30 作者:
jquery打印插件PrintArea實現(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)點擊打印按鈕時觸發(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)點擊打印按鈕時觸發(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實現(xiàn)Extjs表格效果方法分享
這篇文章主要分享了使用FlexiGrid實現(xiàn)Extjs表格效果方法,非常的實用,這里推薦給有相同需求的小伙伴2014-12-12jQuery插件開發(fā)精品教程讓你的jQuery提升一個臺階
這篇文章主要介紹了jQuery插件開發(fā)精品教程讓你的jQuery提升一個臺階 的相關(guān)資料,需要的朋友可以參考下2016-01-01使用jQuery mobile庫檢測url絕對地址和相對地址的方法
這篇文章主要介紹了使用jQuery mobile庫監(jiān)測絕對地址和相對地址的方法,分別是isAbsoluteUrl()和isRelativeUrl()方法的使用,需要的朋友可以參考下2015-12-12jQuery實現(xiàn)隔行變色的方法分析(對比原生JS)
這篇文章主要介紹了jQuery實現(xiàn)隔行變色的方法,結(jié)合實例形式對比原生JS實現(xiàn)隔行變色的相關(guān)技巧,給出了2種jQuery實現(xiàn)隔行變色的方法,需要的朋友可以參考下2016-11-11