lodop+art-template实现web端漂亮的小票样式打印

hersion 发布于2019-08-23 18:14 / 1305人阅读

摘要：一现状由于之前采用打印控件商业版付费可以使用免费版但是会有水印去打印小票，是一行一行的打印，但是不满足给到复杂布局的小票样式，所以得重新考虑如何来实现。打印控件介绍是支持浏览器端的打印控件，功能挺强大的。

一. 现状

由于之前采用Lodop打印控件(商业版付费,可以使用免费版但是会有水印)去打印小票，是一行一行的打印，但是不满足UI给到复杂布局的小票样式，所以得重新考虑如何来实现。

二. 介绍 art-template介绍

art-template 是一个简约、超快的模板引擎。

它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。在线速度测试。

中文文档：art-template中文文档

跟着文档首先熟悉一下，然后看一下语法，跟着语法去实践一下，很快就可以上手完成功能。

Lodop打印控件介绍

Lodop是支持浏览器端的web打印控件，功能挺强大的。

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

目前客户端有很多是基于浏览器内核套的壳，那么在需要特殊打印的场景下，可以试下这个控件。

三. 方案选择

方案一：用html+css进行网页布局，html2canvas.js 来实现将网页转换成图片，然后直接用Lodop打印图片，但是经过测试，打印出来的图片模糊不清，而且html2canvas.js的兼容性IE>8，所以不符合

方案二：将这部分功能让后端去完成模板+数据渲染并生成图片去打印，但是发现跟方案一有相似的地方，解决不了图片打印模糊不清，但是可以解决兼容性问题，依然不符合

方案三：采用html+css进行网页布局，用art-template进行模板渲染后生成html字符串，然后采用Lodop打印控件来直接打印网页。经过实际测试，打印出来的字迹清晰，而且art-template的兼容性在IE5下的功能也是正常的。所以最终就采用该方案

四. 方案落地

art-template模板编写

上面的可以按照自己的样式效果，先写好静态页面，然后在根据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天左右的时间，从方案的筛选到最终完成功能，学习到对于需要打印小票的场景，又多了一点点体会。

GPU云服务器云服务器小票打印机 asp小票打印代码 c lodop云打印服务器 c-lodop 云打印服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104881.html

lodop打印控件的使用

摘要：失败原因有前一个打印事务没有完成操作系统没有添加打印机驱动等。每个打印事务至少初始化一次，打印程序首先调用初始化函数设定打印纸张为固定纸张或自适应内容高，并设定相关大小值或纸张名及打印方向 web打印解决方案 1.生成打印模版（网页），使用window.print()预览打印模版，在浏览器中打印2.导出网页为excel文件，详见网页导出为excel 3.使用lodop打印控件第一种方...

lucas 2019-08-23 14:25 评论0 收藏0
web打印一篇就够，jspdf，wkhtmltopdf

摘要：前端时间公司有一个项目要批量打印，主要是打印准考证，考试成绩，以及考试证书。一句话，一旦出现了问题，修复起来会非常困难，关键代码就一行。问题往往出现在，往往在测试环境没有问题，在正式环境上就不行。前端时间公司有一个项目要批量打印，主要是打印准考证，考试成绩，以及考试证书。参考方案，前端打印，后端打印后端打印后端打印主要是用wkhtmltopdf这个，这个框架需要在后端安装一大堆东...

Miracle 2019-08-21 17:05 评论0 收藏0
web打印一篇就够，jspdf，wkhtmltopdf

摘要：前端时间公司有一个项目要批量打印，主要是打印准考证，考试成绩，以及考试证书。一句话，一旦出现了问题，修复起来会非常困难，关键代码就一行。问题往往出现在，往往在测试环境没有问题，在正式环境上就不行。前端时间公司有一个项目要批量打印，主要是打印准考证，考试成绩，以及考试证书。参考方案，前端打印，后端打印后端打印后端打印主要是用wkhtmltopdf这个，这个框架需要在后端安装一大堆东...

Galence 2019-07-30 14:47 评论0 收藏0
购物小票——Python字符串格式化练习

摘要：格式化字符串一般用于一些格式化输出，我们来看一段例子，利用打印输出一个购物小票。其实学习本就是从简到难，循序渐进的打印结果如下，简单的使用了，字符串的对齐，指定宽度，保留小数点位数等。格式化字符串一般用于一些格式化输出，我们来看一段例子，利用打印输出一个购物小票。是不是会让大家想起第一次学写代码，打印三角形，直角三角形等等。其实学习本就是从简到难，循序渐进的 showImg(http...

Allen 2019-07-30 17:47 评论0 收藏0