基于 Vue 3 + Hiprint 的 Web 打印设计器 vg-print 使用指南

基于 Vue 3 + Hiprint 的 Web 打印设计器 vg-print

在 Web 开发中，打印功能一直是一个痛点。传统的 CSS 打印难以精确控制分页、页眉页脚和复杂布局，而市面上的打印插件要么收费昂贵，要么集成复杂。

最近项目中基于著名的 hiprint 库，封装了一套开箱即用的 Vue 3 打印设计组件库 —— vg-print。它不仅支持可视化拖拽设计模板，还集成了预览、PDF/图片导出，甚至支持配合客户端实现静默打印。

核心特性

vg-print 是一个基于 Vue 3 生态的打印解决方案。它不仅仅是对 hiprint 的简单封装，更提供了一个完整的 FullDesigner 设计器组件。

核心痛点解决

• 可视化设计：不再手写复杂的打印样式，直接拖拽生成模板。
• 开箱即用：引入组件即可使用，无需繁琐的初始化配置。
• 功能全面：支持预览、打印、导出 PDF、导出图片。
• 静默打印：内置 WebSocket 连接功能，配合客户端可实现点击即打，无需弹出浏览器打印对话框。
• 无限制：无域名限制，支持离线使用，完全免费。

功能展示

主要特性包括：

1. FullDesigner 组件：全功能设计器，集成了头部操作栏和预览功能。
2. 多格式导出：内置了 PDF 和图片导出插件，生成高清报表。
3. 多语言支持：支持中、英、德、法、日等多国语言，适合国际化项目。
4. 响应式布局：自动适应不同屏幕尺寸，小屏下自动折叠次要按钮。

快速上手

下面演示如何在 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>