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