Web 打印痛点与解决方案
在 Web 开发中，打印功能一直是一个让人头疼的痛点。传统的 CSS 打印难以精确控制分页、页眉页脚和复杂布局，而市面上的打印插件要么收费昂贵，要么集成复杂。
最近在项目中基于著名的 hiprint 库，封装了一套开箱即用的 Vue 3 打印设计组件库 —— vg-print。它不仅支持可视化拖拽设计模板，还集成了预览、PDF/图片导出，甚至支持配合客户端实现静默打印。
核心特性
- 可视化设计：不再手写复杂的打印样式，直接拖拽生成模板。
- 开箱即用：引入组件即可使用，无需繁琐的初始化配置。
- 功能全面：支持预览、打印、导出 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 }];
// 保存模板回调
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>
