我們在網頁開發過程中經常會有打印頁面的需求，通過JS來實現的方法有很多，這里我做了一個整理，供大家參考。
方式一：window.print()
整體打印
<a href="javascrīpt:window.print()" rel="external nofollow" target="_self">打印</a>
現在就輕松實現了頁面的打印，但是這種方式會將整個頁面打印，如果想要實現指定區域的打印需要通過下面的設置
局部打印
首先，在html中，通過star和end來標記打印區域
<h1>這塊內容不需要打印</h1><!--startprint--><div class="content"> 這里是需要打印的內容 .....</div><!--endprint--><h1>這塊內容不需要打印</h1>
然后，在點擊事件中添加如下代碼
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(); } 過濾打印區域的內容
例如
<!--startprint--><div class="content"> <button class="noprint">預覽</button> <button class="noprint">打印</button> 這里是需要打印的內容 ..... </div><!--endprint-->
上面的預覽和打印按鈕不希望打印，如果要過濾的話可以做下面的樣式設置
<style type="text/css"> @media print { .noprint{ display: none; } } </style>or
<style type="text/css" media="print"> .noprint{ display: none; } </style>兩種寫法任選其一
分頁打印
使用 window.print() 打印時，如果內容超出會自動分頁。但是我們如果需要自定義分頁范圍，如碰到表格分頁打印，可以通過進行如下設置：
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always" > </table>
方式二、jqprint()
jqprint是一個基于jQuery編寫的頁面打印的一個小插件，但是不得不承認這個插件確實很厲害，最近的項目中幫了我的大忙，在Web打印的方面，前端的打印基本是靠window.print()的方式進行打印的，而這個插件在其基礎上進行了進一步的封裝，可以輕松實現打印網頁上的某個區域，這是個亮點。
參考網址：//m.survivalescaperooms.com/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="打印"/>
設置模板打印
$("#printContainer").jqprint({ debug: false, //如果是true則可以顯示iframe查看效果（iframe默認高和寬都很小，可以再源碼中調大），默認是false importCSS: true, //true表示引進原來的頁面的css，默認是true。（如果是true，先會找$("link[media=print]")，若沒有會去找$("link")中的css文件） printContainer: true, //表示如果原來選擇的對象必須被納入打印（注意：設置為false可能會打破你的CSS規則）。 operaSupport: true//表示如果插件也必須支持歌opera瀏覽器，在這種情況下，它提供了建立一個臨時的打印選項卡。默認是true});附言
另外還可以使用html 標簽<object>引入Webbrowser控件（只兼容IE）或者調用windows底層打印，報安全警告，不建議使用（不支持局部打印）
這里只介紹兩種方式，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
