基于 Vue 3 + Hiprint 的 Web 打印设计器 vg-print
在 Web 开发中，打印功能一直是一个痛点。传统的 CSS 打印难以精确控制分页、页眉页脚和复杂布局，而市面上的打印插件要么收费昂贵，要么集成复杂。
最近项目中基于著名的 hiprint 库，封装了一套开箱即用的 Vue 3 打印设计组件库 —— vg-print。它不仅支持可视化拖拽设计模板，还集成了预览、PDF/图片导出，甚至支持配合客户端实现静默打印。
核心特性
vg-print 是一个基于 Vue 3 生态的打印解决方案。它不仅仅是对 hiprint 的简单封装，更提供了一个完整的 FullDesigner 设计器组件。
核心痛点解决
- 可视化设计：不再手写复杂的打印样式，直接拖拽生成模板。
- 开箱即用：引入组件即可使用，无需繁琐的初始化配置。
- 功能全面：支持预览、打印、导出 PDF、导出图片。
- 静默打印：内置 WebSocket 连接功能，配合客户端可实现点击即打，无需弹出浏览器打印对话框。
- 无限制：无域名限制，支持离线使用，完全免费。
功能展示
主要特性包括：
- FullDesigner 组件：全功能设计器，集成了头部操作栏和预览功能。
- 多格式导出：内置了 PDF 和图片导出插件，生成高清报表。
- 多语言支持：支持中、英、德、法、日等多国语言，适合国际化项目。
- 响应式布局：自动适应不同屏幕尺寸，小屏下自动折叠次要按钮。
快速上手
下面演示如何在 Vue 3 项目中快速集成。
1. 安装依赖
npm i vg-print
2. 引入样式
为了保证打印样式在不同环境下（如预览、直接打印）的一致性，建议将样式文件引入到项目中。
3. 使用 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 }
]
// 保存模板回调
const handleSave = ({ template, data }) => {
console.log('保存的模板 JSON:', JSON.stringify(template))
// 这里可以将 template 保存到后端数据库
}
// 调用组件内部方法
const handlePreview = () => {
designer.value?.value?.preView()
}
const handlePrint = () => {
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>
