lodop+art-template實現web端漂亮的小票樣式打印

時間 2019-11-11

標籤 lodop+art lodop art template 實現 web 漂亮小票樣式打印欄目 HTML 简体版

原文原文鏈接

一. 現狀

因爲以前採用Lodop打印控件(商業版付費,可使用免費版可是會有水印)去打印小票，是一行一行的打印，可是不知足UI給到複雜佈局的小票樣式，因此得從新考慮如何來實現。css

二. 介紹

art-template介紹

art-template 是一個簡約、超快的模板引擎。html

它採用做用域預聲明的技術來優化模板渲染速度，從而得到接近 JavaScript 極限的運行性能，而且同時支持 NodeJS 和瀏覽器。在線速度測試。git

中文文檔：art-template中文文檔

跟着文檔首先熟悉一下，而後看一下語法，跟着語法去實踐一下，很快就能夠上手完成功能。github

Lodop打印控件介紹

Lodop是支持瀏覽器端的web打印控件，功能挺強大的。web

官網地址： http://www.lodop.net/

目前客戶端有不少是基於瀏覽器內核套的殼，那麼在須要特殊打印的場景下，能夠試下這個控件。canvas

三. 方案選擇

方案一：用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的語法動態設置瀏覽器

渲染數據：ide

// 增長過濾器
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);