Posted on 2016-11-29 11:53
ZhouFeng 閱讀(2345)
評論(0) 編輯 收藏 所屬分類:
Web開發
因最近項目中要用到打印，研究了一些打印方案，考慮過生成PDF再打印的方案，只是客戶端需要安裝程序，內容輸出的控制不太方便，在網上找了一些稍微輕量級的插件來做，項目中有用到jQuery，便嘗試了一下printPage打印插件，其它的沒有花時間去對比，這個插件能滿足需要，對輸出內容控制也方便，就是一個HTML頁面，也就確定用這個插件了，用法也不是很復雜，在此記錄一下
需要引入jquery插件，我之前用的是1.7.2的版本，2.0.2的版本測試也可以用，以及printPage插件[
https://github.com/posabsolute/jQuery-printPage-plugin]
在頁面中引用頭文件
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.printPage.js"></script>
再用超鏈接觸發打印，需要綁定一個事件
<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>
當然，也可以不用超鏈接來處理，printPage插件主面上有說明，可以通過擴展printPage(){}方法來指定，詳情可參考如上發的github項目主頁
在datatable.html里寫需要打印的頁面，字體大小，顏色等控制，表格線條等用CSS就可以處理了，如果需要控制打印寬度，可以在body里第一層做一個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>
以及頁面元素部分
<body>
<div class="print-area">
......
</div>
</body>
如果有需要強制分頁的部分，可以用CSS控制，如
<div style="page-break-after:always"></div>
在頁面中寫入該樣式，如同在word中插入一個分頁符
至此，主要流程已描述完畢，經在Chrome中測試，效果很不錯，客戶端也不需要安裝軟件，達到效果
不知道怎么在blogjava里添加附件，下面附上DEMO代碼
printdemo目錄下有如下內容
│ demo.html
│
├─js
│ jquery-2.0.2.min.js
│ jquery.printPage.js
│
└─print
datatable.html
demo.html文件內容如下
<!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文件內容如下
<html>
<head>
<title>打印頁面</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>入庫單</b></I>
</div>
<table width="100%" class="datatable" border="1">
<tr>
<td class="label" colspan="2" width="10%">項目名稱</td>
<td>入庫測試項目</td>
<td class="label">倉庫名稱</td>
<td colspan="3">倉庫測試名稱</td>
<td class="label">入庫時間</td>
<td width="12%" align="center">2015-06-22</td>
</tr>
<tr class="label">
<td width="5%">序號</td>
<td colspan="2">物資名稱</td>
<td>規格型號</td><td>計量單位</td><td>單價</td><td>本次入庫數量</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">合計</td>
<td colspan="7" align="right">24,480</td>
<td></td>
</tr>
<tr>
<td class="label" colspan="2" rowspan="2">注意事項</td>
<td colspan="7">1、白聯：存根 紅聯：財務聯 黃聯：審核聯</td>
</tr>
<tr>
<td colspan="7">2、出入庫過程每個環節需相關負責人核對無誤后簽字</td>
</tr>
</table>
<table width="100%">
<tr>
<td width="30%">庫管：測試庫管(簽字)</td>
<td width="30%">收貨人：(簽字)</td>
<td width="30%">經辦人：測試庫管(簽字)</td>
<td align="right">第1/1頁</td>
</tr>
</table>
</div>
</body>
</html>
JS的庫就不貼了，網上都能找到
！！！注意！！！如果是文件方式在瀏覽器中打開，可能會有無法打印的問題（Edge中可以，Chrome和IE中會無法打印），需要部署到服務器端，通過域名或IP地址訪問進行測試