我們在網頁開發過程中經常會有打印頁面的需求，通過JS來實現的方法有很多，這裡我做瞭一個整理，供大傢參考。
方式一：window.print()
整體打印
<a href="javascrīpt:window.print()" rel="external nofollow" target="_self">打印</a>
現在就輕松實現瞭頁面的打印，但是這種方式會將整個頁面打印，如果想要實現指定區域的打印需要通過下面的設置
局部打印
首先，在html中，通過star和end來標記打印區域
<h1>這塊內容不需要打印</h1>
<!–startprint–>
<p class="content">
這裡是需要打印的內容
…..
</p>
<!–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–>
<p class="content">
<button class="noprint">預覽</button>
<button class="noprint">打印</button>
這裡是需要打印的內容
…..
</p>
<!–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()的方式進行打印的，而這個插件在其基礎上進行瞭進一步的封裝，可以輕松實現打印網頁上的某個區域，這是個亮點。
請註意!很多朋友遇到 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
<p id="ddd">
<table>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
</p>
<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底層打印，報安全警告，不建議使用（不支持局部打印）