lodop+art-template实现web端漂亮的小票样式打印
一. 现状
由于之前采用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模板编写
<!-- 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天左右的时间,从方案的筛选到最终完成功能,学习到对于需要打印小票的场景,又多了一点点体会。
转载于:https://www.cnblogs.com/werewolfBoy/p/11060156.html
lodop+art-template实现web端漂亮的小票样式打印相关推荐
- lodop 小票排版_lodop+art-template实现web端漂亮的小票样式打印
一. 现状 由于之前采用Lodop打印控件(商业版付费,可以使用免费版 但是会有水印)去打印小票,是一行一行的打印,但是不满足UI给到复杂布局的小票样式,所以得重新考虑如何来实现. 二. 介绍 art ...
- 移动web端页面设置的特殊样式列举
在实际开发中,移动Web页面的设计风格接近App(手机应用),而不是传统的网页.为了有好的用户体验,我们可以给移动Web页面设置一些特殊样式.下面为列举在移动Web开发中经常会设置的特殊样式,具体如表 ...
- 指定打印机打印、条码 、小票打印 web端打印机控件 LODOP的使用
最近项目需要指定打印机进行前台后厨小票同时打印 1.首先安装LODOP插件点击下载 2 将LodopFuncs.js文件复制到自己项目 注意:vue项目需要底部添加 export { getLodop ...
- 一个快速实现彩屏应用的跨平台快速原型开发工具平台,最重要的是还免费!8ms.xyz平台原以为是单片机版墨刀,今天上去玩了才知道平台厉害的很,基于WEB端免搭建开发环境,跑的还是C代码编译出来的程序!
哈哈哈哈,最近发现一个好用的在线编译.下载.烧录的跨平台快速原型开发工具平台,名字好记–8ms,单看名字是真的不知道干嘛的,不知道为啥叫这个?不多想了,好用就得分享给大家,独乐乐不如众乐乐呀-- 好用 ...
- vue 实现 web端滚动刷新 排序 筛选 响应式布局 (源码)
vue 实现 web端滚动刷新 排序 筛选 响应式布局 先展示效果图 源码: <template><div> <!-- 头部--><div class=&qu ...
- 身份验证错误错误指定的句柄无效_基于 Web 端的人脸识别身份验证「实践」
作者:沫沫 政采云前端团队 转发链接:https://mp.weixin.qq.com/s/fRDpXixnLIy9c0Uh2tMezQ 前言 近些年来,随着生物识别技术的逐渐成熟,基于深度学习的人脸 ...
- 技术实践丨React Native 项目 Web 端同构
摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...
- 跨域调用webapi web端跨域调用webapi
web端跨域调用webapi 在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的 ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
最新文章
- 9种不同的方法帮助你提高国内访问Github的速度!
- 秒杀系统架构分析与实战,一文带你搞懂秒杀架构!
- DateTime时间格式转换为Unix时间戳格式
- 英伟达推出GAN“超级缝合体”,输入文字草图语义图都能生成逼真照片
- 使用脚本实现自动清除指定文件夹下丢失链接文件的符号链接
- 02 基本序列以及序列表示
- llinux环境变量查看和修改
- C语言实现上三角蛇形矩阵不用数组,蛇形矩阵c语言实现
- 【ZZ】 ACM之歌
- 解决openresty http客户端不支持https的问题
- IIS虚拟目录控制类
- php 正则获取邮箱后缀名,php中邮箱地址正则表达式实现与详解
- 苹果手机软件升级密码_安卓系统用久了会卡,苹果系统就能一直流畅?
- 爬虫:UnicodeDecodeError: 'gbk' codec can't decode byte 0xa6 in position
- 腾讯云域名如何绑定ip地址
- 聊天宝裁员85% 罗永浩的下一个风口是电子烟
- 发生死锁时自动发mail
- 了解一下winsock
- SQL Server无法连接到本地数据库
- Flask后端实践 连载十八 Flask输出PDF报表
热门文章
- Shader Compilation for Multiple Platforms
- 利用LSM实现更安全的linux
- window.location.reload() 刷新页面时,如何不弹出提示框
- Item 36. Class-Specific Memory Management
- python类相关的研究生专业-为什么很多大学生甚至研究生抛弃专业去做码农呢?...
- 零基础学python多久可以工作-零基础学习python,要多久才可以学好并且找到工作?...
- 不懂编程可以自学python吗-python教程看完了,还是不会编程?
- python初学者web还是爬虫-还在纠结学爬虫还是数据分析,不如看看这篇文章
- python怎么写文件-Python 读写文件
- python爬虫详细步骤-Python爬虫入门,详细讲解爬虫过程