lodop+art-template实现web端漂亮的小票样式打印
一. 现状
由于之前采用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天左右的时间，从方案的筛选到最终完成功能，学习到对于需要打印小票的场景，又多了一点点体会。
lodop+art-template实现web端漂亮的小票样式打印的更多相关文章
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- 跨域调用webapi web端跨域调用webapi
web端跨域调用webapi 在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...
- web端跨域调用webapi
在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...
- vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版
一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...
- web端跨域调用webapi（转）
在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...
- Django实现web端tailf日志文件
这是Django Channels系列文章的第二篇,以web端实现tailf的案例讲解Channels的具体使用以及跟Celery的结合 通过上一篇<Django使用Channels实现WebS ...
- Django websocket之web端实时查看日志实践案例
这是Django Channels系列文章的第二篇,以web端实现tailf的案例讲解Channels的具体使用以及跟Celery的结合 通过上一篇<Django使用Channels实现WebS ...
- 【原创】从零开始搭建Electron+Vue+Webpack项目框架（六）Electron打包，同时构建客户端和web端
导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...
- 技术实践丨React Native 项目 Web 端同构
摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...
随机推荐
- win7（64位）彻底卸载mysql，重装不再烦恼
[此文出身]鄙人mysql呆鸟,一时手残卸载了mysql,之后重装,始终在配置的时候始终无法通过(如图),纠结一天之久! 查看大图 在某人的鄙视鞭策下,通过度娘的多种指导及自身的多次尝试,终于在下班前 ...
- IIS执行原理
IIS执行原理 服务器的监听(IIS6.0+版本) 当请求到达服务器时,请求最终会到达TCPIP.SYS驱动程序,TCPIP.SYS将请求转发给HTTP.SYS网络驱动程序的请求队列中(可以理解为 ...
- HDU 4862 Jump（更多的联合培训学校1）（最小费用最大流）
职务地址:pid=4862">HDU4862 最小费用流做的还是太少. 建图想不出来. . . 直接引用官方题解的话吧... 最小K路径覆盖的模型.用费用流或者KM算法解决,构造二部图 ...
- 不能进入String.class调试
Window --> Preferences --> Java --> Compiler --> Classfile Generation: "add line nu ...
- 随机森林与 GBDT
随机森林(random forest),GBDT(Gradient Boosting Decision Tree),前者中的森林,与后者中的 Boosting 都在说明,两种模型其实都是一种集成学习( ...
- 简明Python3教程 13.面向对象编程
简介 (注: OOP代表面向对象编程,OO代表面向对象,以后全部使用英文缩写) 迄今为止我们编写的所有程序都是围绕函数创建的,函数即操纵数据的语句块.这称作面向过程编程. 除此之外还有另一种组织程序的 ...
- [Gevent]gevent 网络抓取问答
我听说过gevent基于事件的异步处理功能 如何高效率,该项目已很少使用,今天是没什么学习一些简单的使用. 有正式书面一个非常好的教程 中国版的地址:http://xlambda.com/gevent ...
- WPF利用VisualTreeHelper遍历寻找对象的子级对象或者父级对象
原文:WPF利用VisualTreeHelper遍历寻找对象的子级对象或者父级对象 简介 本文将完整叙述我利用VisualTreeHelper实现题述功能的全部过程,想直接看函数实现的朋友可以跳到函数 ...
- SyncML协议简述（和HTTP协议有点类似）
目前,移动计算和通信设备的流行很大部分原因是因为它们具有一些方便的功能,比如说在需要时可以发送信息给其他用户,用户希望随时随地都可以利用掌上设备访问信息和执行应用程序,甚至在飞行中也可以获得和更新信息 ...
- 数字证书原理 good
文中首先解释了加密解密的一些基础知识和概念,然后通过一个加密通信过程的例子说明了加密算法的作用,以及数字证书的出现所起的作用.接着对数字证书做一个详细的解释,并讨论一下windows中数字证书的管理, ...