发现一个好用的BS系统打印组件，不需要在浏览器安装任何插件

时间：2021-05-01 14:46:36
最近开始涉及电商行业，在做电商相关系统开发时，快递单打印是避不开的课题，很多朋友也在向我问一些快递单打印的问题。

虽然，现在市面上有些所谓的万能快递单打印程序，但那些程序往往都是独立的，无法与电商平台对接，在实际使用中，需要手工填写数据或通过Excel之类的导入，不是很方便，而且打印了之后，快递单号也难以回写到电商平台，所以，这类的软件对于订单量不大的情况还将就能用，但对于订单量稍大的情况下，就显得捉襟见肘了。

现在快递行业都开始推荐使用电子面单，也就是不需要预先印刷好的快递单，这一方面可以省掉印刷成本，另一方面对于快递公司的包裹处理效率上有很大的提高，可以让电商的货物尽快准确地送达买家手里。但使用电子面单的话，一般都需要电商平台与快递公司系统进行对接，打印时实时从快递公司获得快递单号，打印完面单后，把订单信息与快递单号一起回馈给快递公司。而目前平台以BS系统居多，做报BS系统开发的人都知道，在浏览器里如何实现精准快速打印是一个比较麻烦的问题。

浏览器打印的问题伴随着B/S系统的开始就已经存在了，传统的一般是就两种方式：
一种是直接打印浏览器的Web页面，这种方式的好处是直接，不需要任何附件的东西，缺点就是很难精确控制打印位置，而且默认会打印出诸如页面页脚等一些不需要的东西，特别是对于有格式的套打，直接使用浏览器的打印功能绝对是个恶梦。第二种方式是通过Native语言开发一个ActiveX控件安装到浏览器，然后通过ActiveX控件来实现打印输出，这种方式理论是可以达到与C/S系统一样的打印效果，这种方法是前些年常用的方法，也催生了不少专做打印控件的开发商。但这种方式的缺点也是显而易见的，通过安装ActiveX，容易让别人安装恶意软件，也更容易引起浏览器的崩溃。

随着IT行业内对浏览器安全性的更新关注，浏览器厂商开始或者已经淘汰了ActiveX这种东西，连Flash这种用途广泛的插件，都即将退场，所以通过ActiveX插件来实现精准打印已经不是一个可取的方案了。

在后ActiveX时代，陆陆续续地出来很多种替代方案，其中最典型的一种就是在服务端生成PDF文件下载到客户端，然后在客户端用相关的工具打开PDF，再打印PDF，这种方式的好处是只要有PDF阅读软件（部分浏览器自身即支持阅读PDF）就可以打印，缺点是要先下载PDF，然后手工按相应的打印按钮或菜单才能输出到打印机，对于大批量的打印，需要人工介入是一个不可接受的缺点，同时，对于需要精确控制打印位置的场合（套打），在生成PDF时也很难精确控制打印位置。

如何既能避免在浏览器中安装插件而又能实现精准免人工介入打印这个问题困扰了我很久。最近终于让我找到一个叫作“康虎云打印系统”的软件（呵呵，一个不大的功能单一的软件，也取名叫“XX云”，看来作者就是想拉大旗作虎皮，唬唬人，呵呵！），可以完美地解决我的痛点。

这个叫“康虎云打印系统”的软件，其实只算是一个工具，需要配置开发才能实现他的用途。它的原理是在浏览器中生成需要打印的报表的数据（Json格式，如果做B/S开发的人不知道Json，那我也没话说了），当然一般情况都是在服务端生成然后随页面推送到浏览器，然后打印监控服务器自动获取到打印内容并输出到打印机，完全不需要人工介入。简单说，你只需要生成json，剩下都由打印软件包了，是不是很方便？

说了那么多，现在来个快递单打印的例子。
第一步：双击运行cfprint.exe软件，然后保持软件运行状态即可，这个软件很小，占用的资源可以忽略；
第二步：编写测试页面如下： 



<!DOCTYPE html>

<head>

<meta charset="utf-8" />

<title>快递单打印</title>

</head>


<body>

  <div style="width: 100%;text-align:center;">

    <h2>快递单打印测试</h2>

    <div>

      <input type="button" id="btnPrint" value="打印" onClick="doSend(_reportData);" />

    </div>

  </div>

  <div id="output"></div>

</body>


<script type="text/javascript">

var _reportData = '{"template":"waybill_huaxia3.fr3","Cols":[{"type":"str","size":255,"name":"HAWB#","required":false},{"type":"int","size":0,"name":"NO","required":false},{"type":"float","size":0,"name":"华夏单号","required":false},{"type":"integer","size":0,"name":"鹭路通单号","required":false},{"type":"str","size":255,"name":"发件人","required":false},{"type":"str","size":255,"name":"发件人地址","required":false},{"type":"str","size":255,"name":"发件人电话","required":false},{"type":"str","size":255,"name":"发货国家","required":false},{"type":"str","size":255,"name":"收件人","required":false},{"type":"str","size":255,"name":"收件人地址","required":false},{"type":"str","size":255,"name":"收件人电话","required":false},{"type":"str","size":255,"name":"收货人证件号码","required":false},{"type":"str","size":255,"name":"收货省份","required":false},{"type":"float","size":0,"name":"总计费重量","required":false},{"type":"int","size":0,"name":"总件数","required":false},{"type":"float","size":0,"name":"申报总价（CNY）","required":false},{"type":"float","size":0,"name":"申报总价（JPY）","required":false},{"type":"int","size":0,"name":"件数1","required":false},{"type":"str","size":255,"name":"品名1","required":false},{"type":"float","size":0,"name":"单价1（JPY）","required":false},{"type":"str","size":255,"name":"单位1","required":false},{"type":"float","size":0,"name":"申报总价1（CNY）","required":false},{"type":"float","size":0,"name":"申报总价1（JPY）","required":false},{"type":"int","size":0,"name":"件数2","required":false},{"type":"str","size":255,"name":"品名2","required":false},{"type":"float","size":0,"name":"单价2（JPY）","required":false},{"type":"str","size":255,"name":"单位2","required":false},{"type":"float","size":0,"name":"申报总价2（CNY）","required":false},{"type":"float","size":0,"name":"申报总价2（JPY）","required":false},{"type":"int","size":0,"name":"件数3","required":false},{"type":"str","size":255,"name":"品名3","required":false},{"type":"float","size":0,"name":"单价3（JPY）","required":false},{"type":"str","size":255,"name":"单位3","required":false},{"type":"float","size":0,"name":"申报总价3（CNY）","required":false},{"type":"float","size":0,"name":"申报总价3（JPY）","required":false},{"type":"int","size":0,"name":"件数4","required":false},{"type":"str","size":255,"name":"品名4","required":false},{"type":"float","size":0,"name":"单价4（JPY）","required":false},{"type":"str","size":255,"name":"单位4","required":false},{"type":"float","size":0,"name":"申报总价4（CNY）","required":false},{"type":"float","size":0,"name":"申报总价4（JPY）","required":false},{"type":"int","size":0,"name":"件数5","required":false},{"type":"str","size":255,"name":"品名5","required":false},{"type":"float","size":0,"name":"单价5（JPY）","required":false},{"type":"str","size":255,"name":"单位5","required":false},{"type":"float","size":0,"name":"申报总价5（CNY）","required":false},{"type":"float","size":0,"name":"申报总价5（JPY）","required":false},{"type":"str","size":255,"name":"参考号","required":false},{"type":"AutoInc","size":0,"name":"ID","required":false}],"Data":[{"鹭路通单号":730293,"发货国家":"日本","单价1（JPY）":null,"申报总价2（JPY）":null,"单价4（JPY）":null,"申报总价2（CNY）":null,"申报总价5（JPY）":null,"华夏单号":200303900791,"申报总价5（CNY）":null,"收货人证件号码":null,"申报总价1（JPY）":null,"单价3（JPY）":null,"申报总价1（CNY）":null,"申报总价4（JPY）":null,"申报总价4（CNY）":null,"收件人电话":"182-1758-9999","收件人地址":"上海市闵行区虹梅南路1660弄蔷薇八村139号502室","HAWB#":"860014010055","发件人电话":"03-3684-9999","发件人地址":" 1-1-13,Kameido,Koto-ku,Tokyo","NO":3,"ID":3,"单价2（JPY）":null,"申报总价3（JPY）":null,"单价5（JPY）":null,"申报总价3（CNY）":null,"收货省份":null,"申报总价（JPY）":null,"申报总价（CNY）":null,"总计费重量":3.20,"收件人":"张先生2","总件数":13,"品名5":null,"品名4":null,"品名3":null,"品名2":null,"品名1":"纸尿片","参考号":null,"发件人":"NAKAGAWA SUMIRE 2","单位5":null,"单位4":null,"单位3":null,"单位2":null,"单位1":null,"件数5":null,"件数4":null,"件数3":3,"件数2":null,"件数1":10},{"鹭路通单号":730291,"发货国家":"日本","单价1（JPY）":null,"申报总价2（JPY）":null,"单价4（JPY）":null,"申报总价2（CNY）":null,"申报总价5（JPY）":null,"华夏单号":200303900789,"申报总价5（CNY）":null,"收货人证件号码":null,"申报总价1（JPY）":null,"单价3（JPY）":null,"申报总价1（CNY）":null,"申报总价4（JPY）":null,"申报总价4（CNY）":null,"收件人电话":"182-1758-9999","收件人地址":"上海市闵行区虹梅南路1660弄蔷薇八村139号502室","HAWB#":"860014010035","发件人电话":"03-3684-9999","发件人地址":" 1-1-13,Kameido,Koto-ku,Tokyo","NO":1,"ID":1,"单价2（JPY）":null,"申报总价3（JPY）":null,"单价5（JPY）":null,"申报总价3（CNY）":null,"收货省份":null,"申报总价（JPY）":null,"申报总价（CNY）":null,"总计费重量":3.20,"收件人":"张先生","总件数":13,"品名5":null,"品名4":null,"品名3":null,"品名2":null,"品名1":"纸尿片","参考号":null,"发件人":"NAKAGAWA SUMIRE","单位5":null,"单位4":null,"单位3":null,"单位2":null,"单位1":null,"件数5":null,"件数4":null,"件数3":3,"件数2":null,"件数1":10},{"鹭路通单号":730292,"发货国家":"日本","单价1（JPY）":null,"申报总价2（JPY）":null,"单价4（JPY）":null,"申报总价2（CNY）":null,"申报总价5（JPY）":null,"华夏单号":200303900790,"申报总价5（CNY）":null,"收货人证件号码":null,"申报总价1（JPY）":null,"单价3（JPY）":null,"申报总价1（CNY）":null,"申报总价4（JPY）":null,"申报总价4（CNY）":null,"收件人电话":"182-1758-9999","收件人地址":"上海市闵行区虹梅南路1660弄蔷薇八村139号502室","HAWB#":"860014010045","发件人电话":"03-3684-9999","发件人地址":" 1-1-13,Kameido,Koto-ku,Tokyo","NO":2,"ID":2,"单价2（JPY）":null,"申报总价3（JPY）":null,"单价5（JPY）":null,"申报总价3（CNY）":null,"收货省份":null,"申报总价（JPY）":null,"申报总价（CNY）":null,"总计费重量":3.20,"收件人":"张先生1","总件数":13,"品名5":null,"品名4":null,"品名3":null,"品名2":null,"品名1":"纸尿片","参考号":null,"发件人":"NAKAGAWA SUMIRE 1","单位5":null,"单位4":null,"单位3":null,"单位2":null,"单位1":null,"件数5":null,"件数4":null,"件数3":3,"件数2":null,"件数1":10}]}';

console.log("reportData = " + _reportData);

</script>

<script language="javascript" type="text/javascript" src="cfprint.min.js"></script>

<script language="javascript" type="text/javascript" src="myreport.js"></script>

</html>


其中：
###    _reportData 就是打印数据，具体的格式要求可以参考软件的使用帮助
###   cfprint.js 和 myreport.js两个文件可以从压缩包中获取到
 
 第三步：用浏览器打开测试页面，即可在打印机上得到打印出的快递电子面单了。这里说明一下，如果使用的浏览器版本太低，可能会出现无法打印的情况，如果是使用IE10以下版本，请联系一下作者吧，他有解决办法。
 
 然后，就没有然后了，一切就这么简单，把打印功能开发精简到极致。
 

“康虎云打印系统”是一个绿色软件，无需安装，用的时候启动，不需要了删除就行，不会给操作系统塞进任何垃圾（BTW：我也是个绿色软件的拥趸）。打印模板制作是可视化的拖拉控件就能完成，位置可以精确到毫米，这是大多数B/S打印功能都无法达到的。使用该软件，我做一个快递单的打印只需要不到1小时（包含作打印模板，打印模板是可以重用的）。至于其他更细使用方法，有兴趣的人可以不妨自己去用用看。

最后附上这个软件的下载地址：
http://download.csdn.net/detail/wdmsyf/9740453

6 个解决方案

#1

发现一个好用的BS系统打印组件，不需要在浏览器安装任何插件

#2

坑爹的CSDN, 上传的资源没法修改,  自己发的帖子也没法修改!!!!!!!
---------------------------------------------------------
由于我的疏忽, 在CSDN下载区没有说明如何开启内置的报表模板设计器, 导致之前关注并下载该软的朋友无法使用, 非常抱歉!!!
现在我把设计器的使用说明加上了, 请大家稳步到:   
http://sheng.iteye.com/admin/blogs/2353734  
查看并下载该软件. 

#3

坑爹的CSDN, 上传的资源没法修改,  自己发的帖子也没法修改!!!!!!!

上面那个回复还是弄错了, 重新回复一个. 
---------------------------------------------------------
由于我的疏忽, 在CSDN下载区没有说明如何开启内置的报表模板设计器, 导致之前关注并下载该软的朋友无法使用, 非常抱歉!!!
现在我把设计器的使用说明加上了, 请大家稳步到:   
http://sheng.iteye.com/blog/2353734  
查看并下载该软件. 

#4

发现一个好用的BS系统打印组件，不需要在浏览器安装任何插件

#5

设计器没找到

#6

设计器在右下角的“设计”两个字上双击就可以打开了

#1

发现一个好用的BS系统打印组件，不需要在浏览器安装任何插件

#2

坑爹的CSDN, 上传的资源没法修改,  自己发的帖子也没法修改!!!!!!!
---------------------------------------------------------
由于我的疏忽, 在CSDN下载区没有说明如何开启内置的报表模板设计器, 导致之前关注并下载该软的朋友无法使用, 非常抱歉!!!
现在我把设计器的使用说明加上了, 请大家稳步到:   
http://sheng.iteye.com/admin/blogs/2353734  
查看并下载该软件. 

#3

坑爹的CSDN, 上传的资源没法修改,  自己发的帖子也没法修改!!!!!!!

上面那个回复还是弄错了, 重新回复一个. 
---------------------------------------------------------
由于我的疏忽, 在CSDN下载区没有说明如何开启内置的报表模板设计器, 导致之前关注并下载该软的朋友无法使用, 非常抱歉!!!
现在我把设计器的使用说明加上了, 请大家稳步到:   
http://sheng.iteye.com/blog/2353734  
查看并下载该软件. 

#4

发现一个好用的BS系统打印组件，不需要在浏览器安装任何插件

#5

设计器没找到

#6

设计器在右下角的“设计”两个字上双击就可以打开了
标签：

相关文章