一. 現狀 由於之前採用Lodop列印控制項(商業版付費,可以使用免費版 但是會有水印)去列印小票，是一行一行的列印，但是不滿足UI給到複雜佈局的小票樣式，所以得重新考慮如何來實現。 二. 介紹 art template介紹 art template 是一個簡約、超快的模板引擎。 它採用作用域預聲明的 ...
一. 現狀
由於之前採用Lodop列印控制項(商業版付費,可以使用免費版 但是會有水印)去列印小票，是一行一行的列印，但是不滿足UI給到複雜佈局的小票樣式，所以得重新考慮如何來實現。
二. 介紹
art-template介紹
art-template 是一個簡約、超快的模板引擎。
它採用作用域預聲明的技術來優化模板渲染速度，從而獲得接近 JavaScript 極限的運行性能，並且同時支持 NodeJS 和瀏覽器。線上速度測試。
- 中文文檔：art-template中文文檔
跟著文檔首先熟悉一下，然後看一下語法，跟著語法去實踐一下，很快就可以上手完成功能。
Lodop列印控制項介紹
Lodop是支持瀏覽器端的web列印控制項， 功能挺強大的。
目前客戶端有很多是基於瀏覽器內核套的殼，那麼在需要特殊列印的場景下，可以試下這個控制項。
三. 方案選擇
- 方案一：用html+css進行網頁佈局，html2canvas.js 來實現將網頁轉換成圖片，然後直接用Lodop列印圖片， 但是經過測試，列印出來的圖片模糊不清，而且html2canvas.js的相容性IE>8，所以不符合
- 方案二：將這部分功能讓後端去完成模板+數據渲染並生成圖片去列印，但是發現跟方案一有相似的地方，解決不了圖片列印模糊不清，但是可以解決相容性問題，依然不符合
- 方案三：採用html+css進行網頁佈局，用art-template進行模板渲染後生成html字元串，然後採用Lodop列印控制項來直接列印網頁。經過實際測試，列印出來的字跡清晰，而且art-template的相容性在IE5下的功能也是正常的。所以最終就採用該方案
四. 方案落地
art-template模板編寫
<!-- 58小票列印樣式 -->
<script id="print58-tpl" type="text/html">
<!DOCTYPE html> <html> <head> <meta charset="utf-8" />
<style type="text/css">
body {
margin: 0;
padding: 0;
width: 100%;
}
.clearfloat {
overflow: hidden;
}
.left{
float:left;
}
.right{
float:right;
}
.font10 {
font-size: 14px;
}
.fontW {
font-weight:bold;
}
.font8 {
font-size: 12px;
}
.margin2{
margin: 2px 0;
}
.margin5{
margin: 5px 0 !important;
}
.printer{
width: 174px;
}
.title {
text-align: center;
width:90%;
margin:auto;
padding: 5px 0;
}
.divide {
text-align:center;
margin:auto;
}
.detail {
margin: 2px 0;
}
.detail>.left {
margin-left: 10px;
}
.quan>.left {
margin-left: 10px;
}
.bottom{
width:100%;
height:200px;
background:pink;
clear:both;/* 位於上方寫了float的div，下麵這個div必須加這一句 */
}
</style>
</head>
<body>
<div class="printer">
<div class="title font10 fontW">
<div>{{shopName}}</div>
<div style="margin-top:2px;">交易彙總</div>
</div>
<div class="divide">===================</div>
<div class="haha clearfloat font8">
<span class="left">開始日期:</span>
<span class="right">{{startTime}}</span>
</div>
<div class="haha clearfloat font8">
<span class="left">結束日期:</span>
<span class="right">{{endTime}}</span>
</div>
<div class="content">
<div class="divide">-----------------------------</div>
<div class="head font8 clearfloat fontW">
<span class="left">總收款:</span>
<span class="right">{{totalAmount | toFixed}}元({{totalCount}}筆)</span>
</div>
{{each tradeList temp}}
<div class="detail font8 clearfloat">
<span class="left">{{temp.pay_type_desc}}:</span>
{{if depositState == 1 && temp.pay_type != 2}}
{{if temp.tradeLogCount > 0}}
<span class="right">{{temp.consume_money | toFixed}}元({{temp.tradeLogCount}}筆)</span>
{{/if}}
{{else}}
<span class="right">{{temp.money | toFixed}}元({{temp.tradeLogCount}}筆)</span>
{{/if}}
</div>
{{/each}}
{{if depositState == 1}}
<div class="detail font8 clearfloat">
<span class="left">押金:</span>
<span class="right">{{depositMoney | toFixed}}元</span>
</div>
{{/if}}
<div class="divide margin5">>>>>>>>>>>>>>>>>>></div>
<div class="font8 clearfloat margin2">
<span class="left">列印人:</span>
<span class="right">{{printer}}</span>
</div>
<div class="font8 clearfloat margin2">
<span class="left">列印時間:</span>
<span class="right">{{printTime}}</span>
</div>
</div>
<div>
</body>
</html>
</script>上面的可以按照自己的樣式效果，先寫好靜態頁面，然後在根據art-template的語法動態設置
渲染數據：
// 增加過濾器
template.defaults.imports.toFixed = function(num) {
return Number(num).toFixed(2);
}
var printhtml = template('print58-tpl', detail);
$("#printerView").html(printhtml);
var height = $("#printerView").outerHeight(); // 為了動態獲取頁面渲染過後的高度，傳遞到列印控制項，指定列印多少。
// 創建列印頁
// 初始化小票列印身份信息
initLodopLicences();
// 創建小票列印頭信息
//createPayTitle("彙總列印憑證", "彙總信息");
try{
LODOP.PRINT_INIT("列印小票");
LODOP.SET_PRINT_PAGESIZE(3,"58mm",20,"");
LODOP.ADD_PRINT_HTM("9mm","0mm","RightMargin:0mm",height+"px", printhtml);
}catch(err){
}
createPayFooter();
// 開始列印
startPayPrint(pcPrinterName);五. 總結
經過為期1天左右的時間，從方案的篩選到最終完成功能，學習到對於需要列印小票的場景，又多了一點點體會。
