一、业务场景介绍

B/S软件系统相比C/S系统有很多的优势,但是在打印功能尤其是套打方面一直无法与C/S系统相比,在这里我主要通过一个实际应用的套打的例子来简单说明一下WEB打印的方法,这只是其中一种方法,可能不是最优的,但已经在实际使用中,更多的方法大家可以去搜一下。

谷歌浏览器集装箱插件用法(Chrome谷歌浏览器实现WEB套打之打印申通物流单实际应用例子)(1)

网页显示样式

二、打印实现部分代码

打印是使用jquery的打印插件jquery.print实现的,兼容谷歌浏览器,当然包括国内主要的qq浏览器、360浏览器、搜狗浏览器等等的极速模式,因为其极速模式的核心就是谷歌浏览器的核心,打印插件项目地址是:https://github.com/DoersGuild/jQuery.print。

套打主要在于调整打印文字的位置,这里我主要是通过扫描一张实际的申通物流单作为背景来做定位的基本参考,然后根据申通物流单的结构将页面用左右两个div进行分割,然后每个div中用li元素进行定位,主要设置li的 上下左右的距离进行定位,最后拿打印机进行实测,实测中不停的调整位置,最后完工。

li定位打印文字的html代码

谷歌浏览器集装箱插件用法(Chrome谷歌浏览器实现WEB套打之打印申通物流单实际应用例子)(2)

js打印代码

三、直接静默打印的实现:

打印功能中点击打印后都需要一个预览的界面,可以设置页眉页脚、打印机等等参数,但是当我们设置稳定后每次都预览浪费时间,可以通过建立一个新的谷歌浏览器快捷方式,增加一些启动参数来实现直接打印,具体如下:

新建Chrome快捷方式增加如下参数:

--kiosk-printing

谷歌浏览器集装箱插件用法(Chrome谷歌浏览器实现WEB套打之打印申通物流单实际应用例子)(3)

建立快捷方式

谷歌浏览器集装箱插件用法(Chrome谷歌浏览器实现WEB套打之打印申通物流单实际应用例子)(4)

打印预览界面

四、写在最后

申通这个例子是公司项目中实际运用的例子,已经使用的一年多的时间,当然其他的套打可以依照自己完成,申通物流单套打的完整代码可以访问github下载:

https://github.com/ivivian/demo/tree/master/print

欢迎提问!

,