js 實現打印功能
我們在網頁開發過程中經常會有打印頁面的需求，通過JS來實現的方法有很多，這裏我做了一個整理，供大家參考。
方式一：window.print()
整體打印
| 1 |
<a href="javascrīpt:window.print()" rel="external nofollow" target="_self">打印</a>
|
現在就輕松實現了頁面的打印，但是這種方式會將整個頁面打印，如果想要實現指定區域的打印需要通過下面的設置
局部打印
首先，在html中，通過star和end來標記打印區域
| 1 2 3 4 5 6 7 8 |
<h1>這塊內容不需要打印</h1>
<!--startprint-->
<div class="content">
這裏是需要打印的內容
.....
</div>
<!--endprint-->
<h1>這塊內容不需要打印</h1>
|
然後，在點擊事件中添加如下代碼
| 1 2 3 4 5 6 7 8 9 |
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();
}
|
過濾打印區域的內容
例如
| 1 2 3 4 5 6 7 8 |
<!--startprint--><div class="content">
<button class="noprint">預覽</button>
<button class="noprint">打印</button>
這裏是需要打印的內容
.....
</div>
<!--endprint-->
|
上面的預覽和打印按鈕不希望打印，如果要過濾的話可以做下面的樣式設置
?| 1 2 3 4 5 6 7 |
<style type="text/css">
@media print {
.noprint{
display: none;
}
}
</style>
|
or
?| 1 2 3 4 5 |
<style type="text/css" media="print">
.noprint{
display: none;
}
</style>
|
兩種寫法任選其一
分頁打印
使用 window.print() 打印時，如果內容超出會自動分頁。但是我們如果需要自定義分頁範圍，如碰到表格分頁打印，可以通過進行如下設置：
?| 1 2 |
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always" >
</table>
|
方式二、jqprint()
jqprint是一個基於jQuery編寫的頁面打印的一個小插件，但是不得不承認這個插件確實很厲害，最近的項目中幫了我的大忙，在Web打印的方面，前端的打印基本是靠window.print()的方式進行打印的，而這個插件在其基礎上進行了進一步的封裝，可以輕松實現打印網頁上的某個區域，這是個亮點。
參考網址：http://www.jb51.net/article/102230.htm
請註意!很多朋友遇到 Cannot read property ‘opera‘ of undefined 錯誤問題是juqery版本兼容問題
解決方法：加入遷移輔助插件 jquery-migrate-1.0.0.js可解決版本問題
引入
?| 1 2 |
<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script language="javascript" src="jquery.jqprint-0.3.js"></script>
|
js
?| 1 2 3 4 5 |
<script language="javascript">
function a(){
$("#ddd").jqprint();
}
</script>
|
html
?| 1 2 3 4 5 6 7 8 9 10 11 12 |
<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="打印"/>
|
設置模板打印
?| 1 2 3 4 5 6 |
$("#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底層打印，報安全警告，不建議使用（不支持局部打印）
這裏只介紹兩種方式，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
js 實現打印功能