我們在網頁開發過程中經常會有打印頁面的需求，通過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可解決版本問題