一個通過單擊頁面按鈕，便實現頁面打印的jQuery插件jqprint。
請注意!很多朋友遇到 Cannot read property 'opera' of undefined錯誤問題是juqery版本兼容問題
解決方法：加入遷移輔助插件jquery-migrate-1.0.0.js可解決版本問題
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
實現方法
引用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 });
例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>效果測試</title> <link href="printShou.css" rel="stylesheet"type="text/css" media="print"/> <script type="text/javascript"src="jquery-1.7.1.js"></script> <script type="text/javascript"src="jquery.jqprint-0.3.js"></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ $("#visaReport").jqprint({}); }); }); </script> </head> <body> <input type="button"id="btn1" value="打印"/> <div class="visaReport" id="visaReport"> <div class="visa_head"> <divclass="visa_head_title">XX中心</div> <divclass="visa_head_title">確認及收據</div> </div> <div class="visa_body"> <div> <div class="visa_person"> <div class="visa_label">姓名:xiaoming</div> <div class="visa_label">日期:2014/12/30</div> </div> <table class="visa_fee"> <tr> <td>項</td><td>價格</td> </tr> <tr> <td>服務費</td><td>119.00RMB</td> </tr> <tr> <td>快遞費</td><td>130.00R</td> </tr> </table> <table class="visa_total_fee"> <tr> <td style="width:207px;">Total/總計</td><td>240.00RMB</td> </tr> </table> </div> </div> </div> </body> </html>
注意事項
chrome 打印選項 布局 彩色 紙張尺寸 邊距 可選擇去除頁眉頁腳 背景圖形
opera 布局 彩色 紙張尺寸 邊距 可選擇去除頁眉頁腳 背景圖形
firefox 布局 紙張尺寸
safari 布局 紙張尺寸
IE9 布局 紙張尺寸
IE11 布局 紙張尺寸
頁面顯示樣式和打印的樣式是有些區別的，提供了一個media的屬性，指定其輸出的方式為print，即media=print的這個屬性，
寫了這個屬性之后，所引入CSS的一些樣式在打印的時候才會生效了，通過在打印的時候，我們可以通過樣式去改變當前網頁的顯示內容，及顯示的樣式。
<link href="printShou.css" rel="stylesheet"type="text/css" media="print"/>
打印圖片過多 setTimeout修改時間3000