一. 现状

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

二. 介绍

art-template介绍

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

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

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

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天左右的时间，从方案的筛选到最终完成功能，学习到对于需要打印小票的场景，又多了一点点体会。

lodop+art-template实现web端漂亮的小票样式打印的更多相关文章

  1. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  2. 跨域调用webapi web端跨域调用webapi

    web端跨域调用webapi   在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...

  3. web端跨域调用webapi

    在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...

  4. vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

    一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...

  5. web端跨域调用webapi（转）

    在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...

  6. Django实现web端tailf日志文件

    这是Django Channels系列文章的第二篇,以web端实现tailf的案例讲解Channels的具体使用以及跟Celery的结合 通过上一篇<Django使用Channels实现WebS ...

  7. Django websocket之web端实时查看日志实践案例

    这是Django Channels系列文章的第二篇,以web端实现tailf的案例讲解Channels的具体使用以及跟Celery的结合 通过上一篇<Django使用Channels实现WebS ...

  8. 【原创】从零开始搭建Electron+Vue+Webpack项目框架（六）Electron打包，同时构建客户端和web端

    导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...

  9. 技术实践丨React Native 项目 Web 端同构

    摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...

随机推荐

  1. 前端常见算法JS实现

    算法是程序的灵魂,一个优秀的前端工程师对算法也是要有所了解的. 排序算法 1. 冒泡排序 //冒泡排序 function bubbleSort(arr){ var i = j = 0; for(i=1 ...

  2. FZU Problem 2062 Suneast &amp; Yayamao

    http://acm.fzu.edu.cn/problem.php?pid=2062 标题效果: 给你一个数n,要求求出用多少个数字能够表示1~n的全部数. 思路: 分解为二进制. 对于一个数n.看它 ...

  3. SQL Server 统计某个月周末的天数

    ---注意:这里统计的周末包括周5,周6,但不包括周日ALTER FUNCTION [dbo].[GetWeekDaysByMonth] ( @Year INT, @Month INT, @Day I ...

  4. 10.24的注意事项——解决linux_jni编译错误的问题

    公司以opus开源库.因此,我们遇到了一些问题. 我将新下载的opus1.1替换掉老版本号之后,单独编译opus没问题.但是编译相关的文件就会报错. 错误信息例如以下: g++ -Wall -fPIC ...

  5. c语言学习笔记（5）——进制

    进制 1.什么叫进制?  逢n进1: 2.把r进制转成十进制 a*r^0+b*r^1+c*r^2..... 3.把十进制转成r进制 185----->(r进制) 185不停的除r取余,最后把余数 ...

  6. 一言不合就写socket的post和get请求（拼内容，然后发出去即可）

    一言不合就写socket的post和get请求.写个桌面程序,利用java写get和post请求.测试成功: SocketReq.java package com.test.CipherIndex; ...

  7. 参数的范数正则/惩罚（parameter norm penalties）

    1. L2 范数 J~(w;X,y)=J(w;X,y)+α2wTw J 表示的是原始的目标函数,J~ 则是二范数约束后的新的目标函数. 则根据梯度下降算法有: ∇wJ~=∇wJ+αw w←w−ϵ∇wJ ...

  8. win10系统应用打不开

    可能有一些用户升级Win10之后遇到了应用商店.应用打不开或闪退的问题,此时可尝试通过下面的一些方法来解决. 1.点击任务栏的搜索(Cortana小娜)图标,输入Powershell,在搜索结果中右键 ...

  9. Harden the Hacker Thinking (Updating)

    录制自己的最新思考harden过程.通过记录,反射,加强管理,发现缺陷. 等一下design,等一下coding,三十分钟rethinking. 2015-02-26 : 不要在一件事上停留太久: 歇 ...

  10. 一个JSP结果页面tomcat内存溢出

    如今,试验组的同事寻找新能源我看到一个奇怪的现象.一个tomcat应用,内只有一个简单的jsp页面,和这个jsp无论是什么页java代码(我想用这个jsp在她的网页测试server一对tomcat的最 ...