亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

lodop+art-template實(shí)現(xiàn)web端漂亮的小票樣式打印

hersion / 1460人閱讀

摘要：一現(xiàn)狀由于之前采用打印控件商業(yè)版付費(fèi)可以使用免費(fèi)版但是會(huì)有水印去打印小票，是一行一行的打印，但是不滿足給到復(fù)雜布局的小票樣式，所以得重新考慮如何來(lái)實(shí)現(xiàn)。打印控件介紹是支持瀏覽器端的打印控件，功能挺強(qiáng)大的。

一. 現(xiàn)狀

由于之前采用Lodop打印控件(商業(yè)版付費(fèi),可以使用免費(fèi)版 但是會(huì)有水印)去打印小票，是一行一行的打印，但是不滿足UI給到復(fù)雜布局的小票樣式，所以得重新考慮如何來(lái)實(shí)現(xiàn)。

二. 介紹 art-template介紹

art-template 是一個(gè)簡(jiǎn)約、超快的模板引擎。

它采用作用域預(yù)聲明的技術(shù)來(lái)優(yōu)化模板渲染速度，從而獲得接近 JavaScript 極限的運(yùn)行性能，并且同時(shí)支持 NodeJS 和瀏覽器。在線速度測(cè)試。

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

跟著文檔首先熟悉一下，然后看一下語(yǔ)法，跟著語(yǔ)法去實(shí)踐一下，很快就可以上手完成功能。

Lodop打印控件介紹

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

官網(wǎng)地址：http://www.lodop.net/

目前客戶端有很多是基于瀏覽器內(nèi)核套的殼，那么在需要特殊打印的場(chǎng)景下，可以試下這個(gè)控件。

三. 方案選擇 
方案一：用html+css進(jìn)行網(wǎng)頁(yè)布局，html2canvas.js 來(lái)實(shí)現(xiàn)將網(wǎng)頁(yè)轉(zhuǎn)換成圖片，然后直接用Lodop打印圖片， 但是經(jīng)過(guò)測(cè)試，打印出來(lái)的圖片模糊不清，而且html2canvas.js的兼容性IE>8，所以不符合


方案二：將這部分功能讓后端去完成模板+數(shù)據(jù)渲染并生成圖片去打印，但是發(fā)現(xiàn)跟方案一有相似的地方，解決不了圖片打印模糊不清，但是可以解決兼容性問(wèn)題，依然不符合


方案三：采用html+css進(jìn)行網(wǎng)頁(yè)布局，用art-template進(jìn)行模板渲染后生成html字符串，然后采用Lodop打印控件來(lái)直接打印網(wǎng)頁(yè)。經(jīng)過(guò)實(shí)際測(cè)試，打印出來(lái)的字跡清晰，而且art-template的兼容性在IE5下的功能也是正常的。所以最終就采用該方案
四. 方案落地

art-template模板編寫(xiě)

上面的可以按照自己的樣式效果，先寫(xiě)好靜態(tài)頁(yè)面，然后在根據(jù)art-template的語(yǔ)法動(dòng)態(tài)設(shè)置

渲染數(shù)據(jù)：

// 增加過(guò)濾器
template.defaults.imports.toFixed = function(num) {
    return Number(num).toFixed(2);
}

var printhtml =  template("print58-tpl", detail);
$("#printerView").html(printhtml);
var height = $("#printerView").outerHeight();  // 為了動(dòng)態(tài)獲取頁(yè)面渲染過(guò)后的高度，傳遞到打印控件，指定打印多少。
    // 創(chuàng)建打印頁(yè)
    // 初始化小票打印身份信息
    initLodopLicences();
    
    // 創(chuàng)建小票打印頭信息
    //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();
    
     // 開(kāi)始打印
    startPayPrint(pcPrinterName);
五. 總結(jié)

經(jīng)過(guò)為期1天左右的時(shí)間，從方案的篩選到最終完成功能，學(xué)習(xí)到對(duì)于需要打印小票的場(chǎng)景，又多了一點(diǎn)點(diǎn)體會(huì)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104881.html

相關(guān)文章

  • lodop打印控件的使用

    摘要：失敗原因有前一個(gè)打印事務(wù)沒(méi)有完成操作系統(tǒng)沒(méi)有添加打印機(jī)驅(qū)動(dòng)等。每個(gè)打印事務(wù)至少初始化一次，打印程序首先調(diào)用初始化函數(shù)設(shè)定打印紙張為固定紙張或自適應(yīng)內(nèi)容高，并設(shè)定相關(guān)大小值或紙張名及打印方向 web打印解決方案 1.生成打印模版（網(wǎng)頁(yè)），使用window.print()預(yù)覽打印模版，在瀏覽器中打印2.導(dǎo)出網(wǎng)頁(yè)為excel文件，詳見(jiàn)網(wǎng)頁(yè)導(dǎo)出為excel 3.使用lodop打印控件 第一種方...

    lucas 評(píng)論0 收藏0

  • web打印一篇就夠，jspdf，wkhtmltopdf

    摘要：前端時(shí)間公司有一個(gè)項(xiàng)目要批量打印，主要是打印準(zhǔn)考證，考試成績(jī)，以及考試證書(shū)。一句話，一旦出現(xiàn)了問(wèn)題，修復(fù)起來(lái)會(huì)非常困難，關(guān)鍵代碼就一行。問(wèn)題往往出現(xiàn)在，往往在測(cè)試環(huán)境沒(méi)有問(wèn)題，在正式環(huán)境上就不行。 前端時(shí)間公司有一個(gè)項(xiàng)目要批量打印，主要是打印準(zhǔn)考證，考試成績(jī)，以及考試證書(shū)。參考方案，前端打印，后端打印 后端打印 后端打印主要是用wkhtmltopdf這個(gè)，這個(gè)框架需要在后端安裝一大堆東...

    Miracle 評(píng)論0 收藏0

  • web打印一篇就夠，jspdf，wkhtmltopdf

    摘要：前端時(shí)間公司有一個(gè)項(xiàng)目要批量打印，主要是打印準(zhǔn)考證，考試成績(jī)，以及考試證書(shū)。一句話，一旦出現(xiàn)了問(wèn)題，修復(fù)起來(lái)會(huì)非常困難，關(guān)鍵代碼就一行。問(wèn)題往往出現(xiàn)在，往往在測(cè)試環(huán)境沒(méi)有問(wèn)題，在正式環(huán)境上就不行。 前端時(shí)間公司有一個(gè)項(xiàng)目要批量打印，主要是打印準(zhǔn)考證，考試成績(jī)，以及考試證書(shū)。參考方案，前端打印，后端打印 后端打印 后端打印主要是用wkhtmltopdf這個(gè)，這個(gè)框架需要在后端安裝一大堆東...

    Galence 評(píng)論0 收藏0

  • 購(gòu)物小票——Python字符串格式化練習(xí)

    摘要：格式化字符串一般用于一些格式化輸出，我們來(lái)看一段例子，利用打印輸出一個(gè)購(gòu)物小票。其實(shí)學(xué)習(xí)本就是從簡(jiǎn)到難，循序漸進(jìn)的打印結(jié)果如下，簡(jiǎn)單的使用了，字符串的對(duì)齊，指定寬度，保留小數(shù)點(diǎn)位數(shù)等。 格式化字符串一般用于一些格式化輸出，我們來(lái)看一段例子，利用打印輸出一個(gè)購(gòu)物小票。是不是會(huì)讓大家想起第一次學(xué)寫(xiě)代碼，打印三角形，直角三角形等等。其實(shí)學(xué)習(xí)本就是從簡(jiǎn)到難，循序漸進(jìn)的 showImg(http...

    Allen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<