我們?cè)诰W(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)有打印頁(yè)面的需求,通過(guò)JS來(lái)實(shí)現(xiàn)的方法有很多,這里我做了一個(gè)整理,供大家參考。
創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)公司是一家服務(wù)多年做網(wǎng)站建設(shè)策劃設(shè)計(jì)制作的公司,為廣大用戶(hù)提供了網(wǎng)站設(shè)計(jì)、網(wǎng)站制作,成都網(wǎng)站設(shè)計(jì),廣告投放平臺(tái),成都做網(wǎng)站選創(chuàng)新互聯(lián)建站,貼合企業(yè)需求,高性?xún)r(jià)比,滿(mǎn)足客戶(hù)不同層次的需求一站式服務(wù)歡迎致電。
方式一:window.print()
整體打印
<a href="javascrīpt:window.print()" rel="external nofollow" target="_self">打印</a>
現(xiàn)在就輕松實(shí)現(xiàn)了頁(yè)面的打印,但是這種方式會(huì)將整個(gè)頁(yè)面打印,如果想要實(shí)現(xiàn)指定區(qū)域的打印需要通過(guò)下面的設(shè)置
局部打印
首先,在html中,通過(guò)star和end來(lái)標(biāo)記打印區(qū)域
<h2>這塊內(nèi)容不需要打印</h2> <!--startprint--> <div class="content"> 這里是需要打印的內(nèi)容 ..... </div> <!--endprint--> <h2>這塊內(nèi)容不需要打印</h2>
然后,在點(diǎn)擊事件中添加如下代碼
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(); }
過(guò)濾打印區(qū)域的內(nèi)容
例如
<!--startprint--> <div class="content"> <button class="noprint">預(yù)覽</button> <button class="noprint">打印</button> 這里是需要打印的內(nèi)容 ..... </div> <!--endprint-->
上面的預(yù)覽和打印按鈕不希望打印,如果要過(guò)濾的話(huà)可以做下面的樣式設(shè)置
<style type="text/css"> @media print { .noprint{ display: none; } } </style>
or
<style type="text/css" media="print"> .noprint{ display: none; } </style>
兩種寫(xiě)法任選其一
分頁(yè)打印
使用 window.print() 打印時(shí),如果內(nèi)容超出會(huì)自動(dòng)分頁(yè)。但是我們?nèi)绻枰远x分頁(yè)范圍,如碰到表格分頁(yè)打印,可以通過(guò)進(jìn)行如下設(shè)置:
<table width="100%" border="0" cellpadding="0" cellspacing="0" > </table>
方式二、jqprint()
jqprint是一個(gè)基于jQuery編寫(xiě)的頁(yè)面打印的一個(gè)小插件,但是不得不承認(rèn)這個(gè)插件確實(shí)很厲害,最近的項(xiàng)目中幫了我的大忙,在Web打印的方面,前端的打印基本是靠window.print()的方式進(jìn)行打印的,而這個(gè)插件在其基礎(chǔ)上進(jìn)行了進(jìn)一步的封裝,可以輕松實(shí)現(xiàn)打印網(wǎng)頁(yè)上的某個(gè)區(qū)域,這是個(gè)亮點(diǎn)。
參考網(wǎng)址:https://www.jb51.net/article/102230.htm
請(qǐng)注意!很多朋友遇到 Cannot read property 'opera' of undefined 錯(cuò)誤問(wèn)題是juqery版本兼容問(wèn)題
解決方法:加入遷移輔助插件 jquery-migrate-1.0.0.js可解決版本問(wèn)題
引入
<script language="javascript" src="jquery-1.4.4.min.js"></script> <script language="javascript" src="jquery.jqprint-0.3.js"></script>
js
<script language="javascript"> function a(){ $("#ddd").jqprint(); } </script>
html
<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è)置模板打印
$("#printContainer").jqprint({ debug: false, //如果是true則可以顯示iframe查看效果(iframe默認(rèn)高和寬都很小,可以再源碼中調(diào)大),默認(rèn)是false importCSS: true, //true表示引進(jìn)原來(lái)的頁(yè)面的css,默認(rèn)是true。(如果是true,先會(huì)找$("link[media=print]"),若沒(méi)有會(huì)去找$("link")中的css文件) printContainer: true, //表示如果原來(lái)選擇的對(duì)象必須被納入打印(注意:設(shè)置為false可能會(huì)打破你的CSS規(guī)則)。 operaSupport: true//表示如果插件也必須支持歌opera瀏覽器,在這種情況下,它提供了建立一個(gè)臨時(shí)的打印選項(xiàng)卡。默認(rèn)是true });
附言
另外還可以使用html 標(biāo)簽<object>引入Webbrowser控件(只兼容IE)或者調(diào)用windows底層打印,報(bào)安全警告,不建議使用(不支持局部打印)
這里只介紹兩種方式,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
標(biāo)題名稱(chēng):JS實(shí)現(xiàn)頁(yè)面打印(整體、局部)
本文鏈接:http://www.chinadenli.net/article42/pgidhc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、域名注冊(cè)、企業(yè)建站、App設(shè)計(jì)、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
全網(wǎng)營(yíng)銷(xiāo)推廣知識(shí)