1、首先引用Jquery和jqprint-0.3.js(依賴於Jquery的）
<script language="javascript" src="jquery-1.4.4.min.js">
</script> <script language="javascript" src="jquery.jqprint-0.3.js"></script>
2、Hmtl代碼
<div id="print-area">
<table>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
</div>
<input type="button" onclick=" print()" value="打印">
3、JavaScript代碼
<script language="javascript">
function print(){
$("#print-area").jqprint({
debug: false,
importCSS: true,
printContainer: true,
operaSupport: false
});
}
</script>
4、屬性
- debug: false, //如果是true則可以顯示iframe查看效果（iframe默認高和寬都很小，可以再源碼中調大），默認是false
- importCSS: true, //true表示引進原來的頁面的css，默認是true。（如果是true，先會找$("link[media=print]")，若沒有會去找$("link")中的css文件）
- printContainer: true, //表示如果原來選擇的對象必須被納入打印（注意：設置為false可能會打破你的CSS規則）。
- operaSupport: false //表示如果插件也必須支持歌opera瀏覽器，在這種情況下，它提供了建立一個臨時的打印選項卡。默認是true
5、特殊打印樣式
如果在打印時需要獨特的css樣式，除了可以直接寫在style屬性內還可以通過
<link href="printStyle.css" rel="stylesheet"type="text/css" media="print">
來引用外部css文件中的樣式。這樣的好處是該樣式只會在打印時才應用。
下載js和css鏈接
鏈接：https://pan.baidu.com/s/1Yb0XsNp0WOp02EZ7rmE4XQ 密碼：3ehv