因最近項(xiàng)目中要用到打印，研究了一些打印方案，考慮過(guò)生成PDF再打印的方案，只是客戶端需要安裝程序，內(nèi)容輸出的控制不太方便，在網(wǎng)上找了一些稍微輕量級(jí)的插件來(lái)做，項(xiàng)目中有用到j(luò)Query，便嘗試了一下printPage打印插件，其它的沒(méi)有花時(shí)間去對(duì)比，這個(gè)插件能滿足需要，對(duì)輸出內(nèi)容控制也方便，就是一個(gè)HTML頁(yè)面，也就確定用這個(gè)插件了，用法也不是很復(fù)雜，在此記錄一下
需要引入jquery插件，我之前用的是1.7.2的版本，2.0.2的版本測(cè)試也可以用，以及printPage插件[
https://github.com/posabsolute/jQuery-printPage-plugin]
在頁(yè)面中引用頭文件
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.printPage.js"></script>
再用超鏈接觸發(fā)打印，需要綁定一個(gè)事件
<a class="btn btn-default btnPrint" href='print/datatable.html'><span class="glyphicon glyphicon-print" aria-hidden="true"></span> 直接打印</a>
添加事件腳本
<script>
$(document).ready(function() {
$(".btnPrint").printPage();
});
</script>
當(dāng)然，也可以不用超鏈接來(lái)處理，printPage插件主面上有說(shuō)明，可以通過(guò)擴(kuò)展printPage(){}方法來(lái)指定，詳情可參考如上發(fā)的github項(xiàng)目主頁(yè)
在datatable.html里寫需要打印的頁(yè)面，字體大小，顏色等控制，表格線條等用CSS就可以處理了，如果需要控制打印寬度，可以在body里第一層做一個(gè)CSS固定寬度
<style>
.print-area {
width: 750px;
}
.label {
text-align: center;
font-weight: bolder;
}
.titlebar {
height: 10px;
text-align: center;
}
.datatable {
border: solid black 1px;
}
table {
border-collapse: collapse;
}
td {
font-size: 10pt;
}
</style>
以及頁(yè)面元素部分
<body>
<div class="print-area">
......
</div>
</body>
如果有需要強(qiáng)制分頁(yè)的部分，可以用CSS控制，如
<div style="page-break-after:always"></div>
在頁(yè)面中寫入該樣式，如同在word中插入一個(gè)分頁(yè)符
至此，主要流程已描述完畢，經(jīng)在Chrome中測(cè)試，效果很不錯(cuò)，客戶端也不需要安裝軟件，達(dá)到效果
不知道怎么在blogjava里添加附件，下面附上DEMO代碼
printdemo目錄下有如下內(nèi)容
│ demo.html
│
├─js
│ jquery-2.0.2.min.js
│ jquery.printPage.js
│
└─print
datatable.html
demo.html文件內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Print Demo</title>
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="js/jquery.printPage.js"></script>
<script>
$(document).ready(function() {
$(".btnPrint").printPage();
});
</script>
</head>
<body>
<a class="btnPrint" href='print/datatable.html'>直接打印</a>
</body>
</html>
datatable.html文件內(nèi)容如下
<html>
<head>
<title>打印頁(yè)面</title>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style>
.print-area {
width: 750px;
}
.label {
text-align: center;
font-weight: bolder;
}
.titlebar {
height: 20px;
text-align: center;
}
.datatable {
border: solid black 1px;
}
table {
border-collapse: collapse;
}
td {
font-size: 10pt;
}
</style>
</head>
<body>
<div class="print-area">
<div class="titlebar">
<I><b>入庫(kù)單</b></I>
</div>
<table width="100%" class="datatable" border="1">
<tr>
<td class="label" colspan="2" width="10%">項(xiàng)目名稱</td>
<td>入庫(kù)測(cè)試項(xiàng)目</td>
<td class="label">倉(cāng)庫(kù)名稱</td>
<td colspan="3">倉(cāng)庫(kù)測(cè)試名稱</td>
<td class="label">入庫(kù)時(shí)間</td>
<td width="12%" align="center">2015-06-22</td>
</tr>
<tr class="label">
<td width="5%">序號(hào)</td>
<td colspan="2">物資名稱</td>
<td>規(guī)格型號(hào)</td><td>計(jì)量單位</td><td>單價(jià)</td><td>本次入庫(kù)數(shù)量</td><td>金額</td><td>備注</td>
</tr>
<tr>
<td align="center">1</td>
<td colspan="2">混凝土</td>
<td>C20</td>
<td>立方</td>
<td align="right">340</td>
<td align="right">72</td>
<td align="right">24,480</td>
<td></td>
</tr>
<tr>
<td align="center">2</td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="right"></td>
<td></td>
</tr>
<tr>
<td align="center">3</td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="right"></td>
<td></td>
</tr>
<tr>
<td align="center">4</td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="right"></td>
<td></td>
</tr>
<tr>
<td align="center">5</td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="right"></td>
<td></td>
</tr>
<tr>
<td align="center">6</td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="right"></td>
<td></td>
</tr>
<tr>
<td align="center">7</td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="right"></td>
<td></td>
</tr>
<tr>
<td align="center">8</td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="right"></td>
<td></td>
</tr>
<tr>
<td align="center">9</td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="right"></td>
<td></td>
</tr>
<tr>
<td align="center">10</td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="right"></td>
<td></td>
</tr>
<tr>
<td class="label">合計(jì)</td>
<td colspan="7" align="right">24,480</td>
<td></td>
</tr>
<tr>
<td class="label" colspan="2" rowspan="2">注意事項(xiàng)</td>
<td colspan="7">1、白聯(lián)：存根 紅聯(lián)：財(cái)務(wù)聯(lián) 黃聯(lián)：審核聯(lián)</td>
</tr>
<tr>
<td colspan="7">2、出入庫(kù)過(guò)程每個(gè)環(huán)節(jié)需相關(guān)負(fù)責(zé)人核對(duì)無(wú)誤后簽字</td>
</tr>
</table>
<table width="100%">
<tr>
<td width="30%">庫(kù)管：測(cè)試庫(kù)管(簽字)</td>
<td width="30%">收貨人：(簽字)</td>
<td width="30%">經(jīng)辦人：測(cè)試庫(kù)管(簽字)</td>
<td align="right">第1/1頁(yè)</td>
</tr>
</table>
</div>
</body>
</html>
JS的庫(kù)就不貼了，網(wǎng)上都能找到
！！！注意！！！如果是文件方式在瀏覽器中打開，可能會(huì)有無(wú)法打印的問(wèn)題（Edge中可以，Chrome和IE中會(huì)無(wú)法打印），需要部署到服務(wù)器端，通過(guò)域名或IP地址訪問(wèn)進(jìn)行測(cè)試