本帖最后由 renho 于 2022-11-14 14:39 编辑
又到了分享时间，很高兴与大家相遇
不要问我为什么有这么多干货
因为我被知识诅咒了
老规矩，我们先上效果图
最终打印效果
首先介绍下此次使用的打印组件 hiprint.io
必须感谢有这么优秀的打印组件
才是用复杂的打印需求得以满足
打印组件不收费，可以随意使用
支持windows,macOS,linux 系统，支持移动端，PC端浏览器，angular,vue,react 等 分页预览，打印，操作简单，运行快速。预览界面为css+html 。支持数据分组，批量预览。生成pdf,图片更方便
打印总共有2部分组成
一.打印模板
打印模板为json格式数据，不过大家不用担心会不容易设计，有可视化的模板设计器
打印模板设计器（json格式，可以拖拽进行设计）特别适合打印标签，只需调整模板json就能快速调整打印格式
示例模板如下
- {"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}]}
二、打印数据
打印数据是与上面模板键值对应的，可以是一条和多条
- var $html = barCodehiprintTemplate.getHtml([{
- name: '黄山',
- barcode: '13234567'
- }, {
- name: '黄波',
- barcode: '1224567'
- }, {
- name: '黄磊',
- barcode: '1234567'
- }, {
- name: '黄磊',
- barcode: '1234567'
- }, {
- name: '古丽娜',
- barcode: '7654321'
- }])
有了打印模板和打印数据 就直接调用函数传入进去打印
对于需要实现无预览的打印的需求，需要安装客户端
支持win和linux
点击下载：hiprint.io
由于官方默认的是 使用本机的打印服务，我对其js进行了修改
可以实现连接任意客户端。
完整体验动图：
效果图展示的是我使用的虚拟打印机fineprint，一般情况下不会有此弹窗，会直接进行打印
方案优点：
1）模板json代码可以可视化设置，很方便
2）通过活字格的服务端命令实现了数据json动态生成
3）实现了工厂实际场景需要的静默打印。
有需求老板欢迎联系，致力于为您提供最优质技术服务。
商城地址：
无预览打印框架 - 葡萄城市场 (grapecity.com.cn)
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图