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