分享篇三十一：无预览条码、文件模板打印方案（js）

又到了分享时间，很高兴与大家相遇
不要问我为什么有这么多干货
因为我被知识诅咒了


老规矩，我们先上效果图


最终打印效果





首先介绍下此次使用的打印组件  hiprint.io
必须感谢有这么优秀的打印组件
才是用复杂的打印需求得以满足
打印组件不收费，可以随意使用

支持windows,macOS,linux 系统，支持移动端，PC端浏览器，angular,vue,react 等 分页预览，打印，操作简单，运行快速。预览界面为css+html 。支持数据分组，批量预览。生成pdf,图片更方便

打印总共有2部分组成


一.打印模板
打印模板为json格式数据，不过大家不用担心会不容易设计，有可视化的模板设计器


打印模板设计器（json格式，可以拖拽进行设计）特别适合打印标签，只需调整模板json就能快速调整打印格式

示例模板如下

1. {"panels":[{"index":0,"height":20,"width":40,"paperHeader":0,"paperFooter":130,"printElements":[{"options":{"left":5,"top":5,"height":23,"width":72,"field":"barcode","testData":"1234556","textType":"barcode"},"printElementType":{"title":"文本","type":"text"}},{"options":{"left":5,"top":40,"height":13,"width":93,"field":"name","hideTitle":"1"},"printElementType":{"title":"文本","type":"text"}}],"paperNumberDisabled":true,"rotate":true}]}
   

复制代码

二、打印数据
打印数据是与上面模板键值对应的，可以是一条和多条

1. var $html = barCodehiprintTemplate.getHtml([{
   
2.          name: '黄山',
   
3.          barcode: '13234567'
   
4.      }, {
   
5.          name: '黄波',
   
6.          barcode: '1224567'
   
7.      }, {
   
8.          name: '黄磊',
   
9.          barcode: '1234567'
   
10.      }, {
    
11.          name: '黄磊',
    
12.          barcode: '1234567'
    
13.      }, {
    
14.          name: '古丽娜',
    
15.          barcode: '7654321'
    
16.      }])
    

复制代码

三、打印
有了打印模板和打印数据  就直接调用函数传入进去打印
对于需要实现无预览的打印的需求，需要安装客户端
支持win和linux
点击下载：hiprint.io

由于官方默认的是 使用本机的打印服务，我对其js进行了修改
可以实现连接任意客户端。


完整体验动图：


效果图展示的是我使用的虚拟打印机fineprint，一般情况下不会有此弹窗，会直接进行打印

方案优点：
   1）模板json代码可以可视化设置，很方便
   2）通过活字格的服务端命令实现了数据json动态生成
   3）实现了工厂实际场景需要的静默打印。

有需求老板欢迎联系，致力于为您提供最优质技术服务。
商城地址：
无预览打印框架 - 葡萄城市场 (grapecity.com.cn)

qq189980980 发表于 2022-11-8 20:43
免费才是好东西，免费又分享更是好人

拒绝白嫖，知识需要付费获得。

我来现身说法一下，这个项目需求算是我提的，楼主是场外技术支持帮我实现的。
我的需求是条码标签打印，PC和PDA两端都要打印，而且特别是PDA不能有预览，希望直接丢到打印机上面实现静默打印。

后来我在楼主的方案上稍微调整了一下，通过PDA的IP去匹配打印机服务的IP实现PDA一键自动从对应的打印机打印出来。

当然调试的时候都是pdf虚拟打印机，但是现场已经实现了，完美实现我的需求。

优点：
1）模板json代码可以可视化设置，很方便
2）通过活字格的服务端命令实现了数据json动态生成
3）实现了工厂实际场景需要的静默打印。

有了PDF的URL ,可否直接打印？

yy5512 发表于 2022-11-14 15:35
我确定不挑打印机，我喜欢楼主这个方案的原因只有一点，因为这个插件仅仅需要少量的js代码即可实现，完美 ...

可以安排开课了

gczxxu 发表于 2022-11-8 22:36
哦。。我只知道web服务可以解决这个，，写个带服务的框架或单独写个服务。这也是目前BS普遍的做法。你这 ...

我确定不挑打印机，我喜欢楼主这个方案的原因只有一点，因为这个插件仅仅需要少量的js代码即可实现，完美的匹配了活字格低代码的大方向。

PS：在使用楼主这个方案之前，其实我已经有一套cs的服务配合使用了，但是长期看我还是改成了这个方案。

yy5512 发表于 2022-11-14 14:30
我来现身说法一下，这个项目需求算是我提的，楼主是场外技术支持帮我实现的。
我的需求是条码标签打印，PC ...

感谢老板支持

优秀，学习一下

renho 发表于 2022-11-13 22:59
可以

来段教程展示下

夏雪冬阳 发表于 2022-11-13 22:49
能动态生成pdf吗

可以

能动态生成pdf吗

夏雪冬阳 发表于 2022-11-12 20:13
这个能动态生成word文档吗

不行，只能生成pdf，这是纯前端方案