利用jquery.print.js實現自定義網頁列印
阿新 • • 發佈:2019-01-08
最近做專案。客戶好些地方需要列印網頁上的表格,研究了好些方法都不太理想。最後找到一個jquery.print.js列印外掛,非常方便就可以實現想要的網頁列印效果,值得推薦。
實現方法
引用jquery和,jqprint到您的頁面
<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
});
PS:請注意!很多朋友遇到 Cannot read property ‘opera’ of undefined錯誤問題是juqery版本相容問題,解決方法:加入遷移輔助外掛jquery-migrate-1.0.0.js可解決版本問題
<script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>
注意,我在使用中遇到的一些問題
1、css背景顏色打印不出來,解決方法是
tr.header {
background-color: #ccc !important;
}
@media print {
tr.header {
background-color: #ccc !important;
-webkit-print-color-adjust: exact;
}}
不知道為什麼已經勾選了IE的列印底色不行,chrome也不行,但通過上述的style定義就可以了.
2、對於需要列印區域裡部分不想列印的內容加上class=”no-print”就可以隱藏。