在 Web 开发中， 打印功能 一直是一个让人头疼的痛点。传统的 CSS 打印难以精确控制分页、页眉页脚和复杂布局，而市面上的打印插件要么收费昂贵，要么集成复杂。
最近在项目中基于著名的 hiprint 库，封装了一套 开箱即用 的 Vue 3 打印设计组件库 —— vg-print 。它不仅支持可视化拖拽设计模板，还集成了预览、PDF/图片导出，甚至支持配合客户端实现 静默打印 。今天就把这个开源项目分享给大家，希望能帮到有类似需求的开发者。
为什么选择 vg-print？
vg-print 是一个基于 Vue 3 生态的打印解决方案。它不仅仅是对 hiprint 的简单封装，更提供了一个完整的 FullDesigner 设计器组件。
Vue 2 版本: 如果你使用的是 Vue 2+webpack4.0以上，请查看 vg-print-vue2
👉 点击进入vg-print开发者文档
核心痛点解决：
- 可视化设计 ：不再手写复杂的打印样式，直接拖拽生成模板。
- 开箱即用 ：引入组件即可使用，无需繁琐的初始化配置。
- 功能全面 ：支持预览、打印、导出 PDF、导出图片。
- 静默打印 ：内置 WebSocket 连接功能，配合客户端可实现点击即打，无需弹出浏览器打印对话框。
- 无限制 ：无域名限制，支持离线使用，完全免费。 功能展示
主要特性：
FullDesigner 组件 ：全功能设计器，集成了头部操作栏和预览功能。
多格式导出 ：内置了 PDF 和图片导出插件，生成高清报表。
多语言支持 ：支持中、英、德、法、日等多国语言，适合国际化项目。
响应式布局 ：自动适应不同屏幕尺寸，小屏下自动折叠次要按钮。 快速上手
下面演示如何在 Vue 3 项目中快速集成。安装依赖
npm i vg-print- 引入样式
为了保证打印样式在不同环境下（如预览、直接打印）的一致性，建议将样式文件引入到项目中。
- 使用 FullDesigner 组件
这是最简单的集成方式，直接在页面中使用 ：
<template><divclass="print-page"><FullDesigner ref="designer":initial-template="initialTemplate":initial-print-data="printData"default-lang="cn"@save="handleSave"><!--自定义头部左侧--><template #headerLeft><divclass="header-title">我的打印设计器</div></template><!--自定义头部右侧按钮--><template #headerRight><el-button type="primary"@click="handlePreview">预览</el-button><el-button type="success"@click="handlePrint">直接打印</el-button></template></FullDesigner></div></template><script setup>import{ref}from'vue'// 引入 vg-print 组件（假设已全局注册或局部引入）constdesigner=ref(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()}</script><style 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-host="'http://127.0.0.1:17521'":hi-token="token":hi-auto-connect="true"/>配合配套的 Electron 客户端，即可实现点击按钮直接出纸。
配套客户端下载：
为了实现静默打印，需要安装专门的客户端工具。我已经将编译好的安装包上传到了 CSDN，大家可以直接下载使用：
👉 点击下载：静默打印客户端工具 (Windows/Mac)
欢迎大家下载体验，如果有问题可以在评论区留言或者在 GitHub 上提 Issue！
