|
我們在網(wǎng)頁開發(fā)過程中經(jīng)常會有打印頁面的需求,，通過JS來實(shí)現(xiàn)的方法有很多,，這里我做了一個(gè)整理,，供大家參考。
方式一：window.print() 整體打印 1 | <a href="javascrīpt:window.print()" rel="external nofollow" target="_self">打印</a>
|
現(xiàn)在就輕松實(shí)現(xiàn)了頁面的打印,，但是這種方式會將整個(gè)頁面打印,，如果想要實(shí)現(xiàn)指定區(qū)域的打印需要通過下面的設(shè)置 局部打印 首先，在html中,，通過star和end來標(biāo)記打印區(qū)域 1 2 3 4 5 6 7 8 | <h1>這塊內(nèi)容不需要打印</h1>
<!--startprint-->
<div class="content">
這里是需要打印的內(nèi)容
.....
</div>
<!--endprint-->
<h1>這塊內(nèi)容不需要打印</h1>
|
然后,，在點(diǎn)擊事件中添加如下代碼 1 2 3 4 5 6 7 8 9 | function doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
|
過濾打印區(qū)域的內(nèi)容 例如 1 2 3 4 5 6 7 8 | <!--startprint-->
<div class="content">
<button class="noprint">預(yù)覽</button>
<button class="noprint">打印</button>
這里是需要打印的內(nèi)容
.....
</div>
<!--endprint-->
|
上面的預(yù)覽和打印按鈕不希望打印，如果要過濾的話可以做下面的樣式設(shè)置 1 2 3 4 5 6 7 | <style type="text/css">
@media print {
.noprint{
display: none;
}
}
</style>
|
or 1 2 3 4 5 | <style type="text/css" media="print">
.noprint{
display: none;
}
</style>
|
兩種寫法任選其一 分頁打印 使用 window.print() 打印時(shí),，如果內(nèi)容超出會自動(dòng)分頁,。但是我們?nèi)绻枰远x分頁范圍，如碰到表格分頁打印,，可以通過進(jìn)行如下設(shè)置： 1 2 | <table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always" >
</table>
|
方式二,、jqprint() jqprint是一個(gè)基于jQuery編寫的頁面打印的一個(gè)小插件，但是不得不承認(rèn)這個(gè)插件確實(shí)很厲害,，最近的項(xiàng)目中幫了我的大忙,，在Web打印的方面，前端的打印基本是靠window.print()的方式進(jìn)行打印的,，而這個(gè)插件在其基礎(chǔ)上進(jìn)行了進(jìn)一步的封裝,，可以輕松實(shí)現(xiàn)打印網(wǎng)頁上的某個(gè)區(qū)域，這是個(gè)亮點(diǎn),。 參考網(wǎng)址：https://www.jb51.net/article/102230.htm 請注意!很多朋友遇到 Cannot read property 'opera' of undefined 錯(cuò)誤問題是juqery版本兼容問題
解決方法：加入遷移輔助插件 jquery-migrate-1.0.0.js可解決版本問題 引入 1 2 | <script language="javascript" src="jquery-1.4.4.min.js"></script>
<script language="javascript" src="jquery.jqprint-0.3.js"></script>
|
js 1 2 3 4 5 | <script language="javascript">
function a(){
$("#ddd").jqprint();
}
</script>
|
html 1 2 3 4 5 6 7 8 9 10 11 12 | <div id="ddd">
<table>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
</div>
<input type="button" onclick=" a()" value="打印"/>
|
設(shè)置模板打印 1 2 3 4 5 6 | $("#printContainer").jqprint({
debug: false, //如果是true則可以顯示iframe查看效果（iframe默認(rèn)高和寬都很小,，可以再源碼中調(diào)大），默認(rèn)是false
importCSS: true, //true表示引進(jìn)原來的頁面的css,，默認(rèn)是true,。（如果是true，先會找$("link[media=print]"),，若沒有會去找$("link")中的css文件）
printContainer: true, //表示如果原來選擇的對象必須被納入打?。ㄗ⒁猓涸O(shè)置為false可能會打破你的CSS規(guī)則）,。
operaSupport: true//表示如果插件也必須支持歌opera瀏覽器，在這種情況下,，它提供了建立一個(gè)臨時(shí)的打印選項(xiàng)卡,。默認(rèn)是true
});
|
附言 另外還可以使用html 標(biāo)簽<object>引入Webbrowser控件（只兼容IE）或者調(diào)用windows底層打印，報(bào)安全警告,，不建議使用（不支持局部打?。?br> 這里只介紹兩種方式，希望對大家的學(xué)習(xí)有所幫助,，也希望大家多多支持腳本之家,。
如您對本文有所疑義或者有任何需求,，請點(diǎn)擊訪問腳本社區(qū)，百萬網(wǎng)友為您解惑! 原文鏈接：http://www.jianshu.com/p/40dfd2d6c344?utm_source=tuicool&utm_medium=referral
|
