1. 程式人生 > >利用jquery.print.js實現自定義網頁列印

利用jquery.print.js實現自定義網頁列印

最近做專案。客戶好些地方需要列印網頁上的表格,研究了好些方法都不太理想。最後找到一個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”就可以隱藏。