[开源推荐] 基于 Vue 3 + Hiprint 的 Web 打印设计器 vg-print：拖拽设计、静默打印一站式方案

在 Web 开发中 打印功能 一直是一个让人头疼的痛点。传统的 CSS 打印难以精确控制分页、页眉页脚和复杂布局而市面上的打印插件要么收费昂贵要么集成复杂。最近在项目中基于著名的 hiprint 库封装了一套 开箱即用 的 Vue 3 打印设计组件库 —— vg-print 。它不仅支持可视化拖拽设计模板还集成了预览、PDF/图片导出甚至支持配合客户端实现 静默打印 。今天就把这个开源项目分享给大家希望能帮到有类似需求的开发者。为什么选择 vg-printvg-print 是一个基于 Vue 3 生态的打印解决方案。它不仅仅是对 hiprint 的简单封装更提供了一个完整的 FullDesigner 设计器组件。Vue 2 版本: 如果你使用的是 Vue 2webpack4.0以上请查看 vg-print-vue2 点击进入vg-print开发者文档核心痛点解决可视化设计 不再手写复杂的打印样式直接拖拽生成模板。开箱即用 引入组件即可使用无需繁琐的初始化配置。功能全面 支持预览、打印、导出 PDF、导出图片。静默打印 内置 WebSocket 连接功能配合客户端可实现点击即打无需弹出浏览器打印对话框。无限制 无域名限制支持离线使用完全免费。 功能展示主要特性FullDesigner 组件 全功能设计器集成了头部操作栏和预览功能。多格式导出 内置了 PDF 和图片导出插件生成高清报表。多语言支持 支持中、英、德、法、日等多国语言适合国际化项目。响应式布局 自动适应不同屏幕尺寸小屏下自动折叠次要按钮。 快速上手下面演示如何在 Vue 3 项目中快速集成。安装依赖npm i vg-print引入样式为了保证打印样式在不同环境下如预览、直接打印的一致性建议将样式文件引入到项目中。使用 FullDesigner 组件这是最简单的集成方式直接在页面中使用 templatedivclassprint-pageFullDesigner refdesigner:initial-templateinitialTemplate:initial-print-dataprintDatadefault-langcnsavehandleSave!--自定义头部左侧--template #headerLeftdivclassheader-title我的打印设计器/div/template!--自定义头部右侧按钮--template #headerRightel-button typeprimaryclickhandlePreview预览/el-buttonel-button typesuccessclickhandlePrint直接打印/el-button/template/FullDesigner/div/templatescript setupimport{ref}fromvue// 引入 vg-print 组件假设已全局注册或局部引入constdesignerref(null)// 初始模板数据可选constinitialTemplate{panels:[]}// 打印测试数据constprintData[{name:测试用户,id:1001}]// 保存模板回调consthandleSave({template,data}){console.log(保存的模板JSON:,JSON.stringify(template))// 这里可以将 template 保存到后端数据库}// 调用组件内部方法consthandlePreview(){designer.value?.value?.preView()}consthandlePrint(){designer.value?.value?.print()}/scriptstyle scoped.print-page{height:100vh;}.header-title{font-size:18px;font-weight:bold;color:#fff;margin-left:10px;}/style进阶静默打印对于需要高频打印的场景如快递单、小票浏览器自带的打印预览窗口非常影响效率。 vg-print 支持连接本地客户端进行静默打印。只需配置 hi-host 和 hi-token 即可FullDesigner:hi-hosthttp://127.0.0.1:17521:hi-tokentoken:hi-auto-connecttrue/配合配套的 Electron 客户端即可实现点击按钮直接出纸。配套客户端下载为了实现静默打印需要安装专门的客户端工具。我已经将编译好的安装包上传到了 CSDN大家可以直接下载使用 点击下载静默打印客户端工具 (Windows/Mac)欢迎大家下载体验如果有问题可以在评论区留言或者在 GitHub 上提 Issue