Hiprint Print Designer

基于 Vue3 + Element Plus 的打印模板设计器，完全兼容 vue-plugin-hiprint 的模板格式。 hiprint自带的设计器实在是太难用了，所以就写了一个简单的设计器。

功能特性

• 🎨 可视化设计 - 拖拽式组件面板，所见即所得
• 📐 对齐辅助 - 自动吸附对齐线，精准定位
• 📊 丰富组件 - 文本、图片、表格、条形码、二维码等
• 🎯 数据源绑定 - 支持字段绑定和数据预览
• 💾 格式兼容 - 完全兼容 vue-plugin-hiprint 模板格式
• 🖨️ 预览打印 - 实时预览和打印功能

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

在其他项目中使用

1. 安装依赖

确保你的项目中安装了以下依赖：

npm install vue@3 element-plus @element-plus/icons-vue

2. 引入组件

<template>
  <PrintDesigner />
</template>

<script setup>
import PrintDesigner from '@/components/PrintDesigner.vue'
</script>

3. 全局注册 Element Plus

在 main.js 中：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

组件 API

属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | printData | Object | - | 打印数据源 |

方法

| 方法名 | 参数 | 说明 | |--------|------|------| | exportJson() | 无 | 导出模板 JSON | | importJson(json) | json: String | 导入模板 JSON | | clearPaper() | 无 | 清空画布 |

事件

| 事件名 | 参数 | 说明 | |--------|------|------| | export | data: Object | 模板导出时触发 |

数据源格式

{
  "name": "测试用户",
  "date": "2024-01-01",
  "company": "某某公司",
  "table": [
    { "id": "1", "name": "商品A", "price": 100 },
    { "id": "2", "name": "商品B", "price": 200 }
  ]
}

支持的组件

基础组件

• 文本 - 普通文本，支持字段绑定
• 自定义文本 - 加粗居中的文本
• 长文本 - 支持多行显示
• 图片 - 支持 URL 和字段绑定
• 表格 - 支持动态数据绑定
• HTML - 支持 HTML 内容
• 条形码 - 支持字段绑定
• 二维码 - 支持字段绑定

辅助组件

• 横线 - 水平分隔线
• 竖线 - 垂直分隔线
• 矩形 - 矩形框
• 椭圆 - 椭圆/圆形

导出格式

导出的模板完全兼容 vue-plugin-hiprint：

{
  "panels": [{
    "index": 0,
    "width": 595.28,
    "height": 841.89,
    "printElements": [
      {
        "options": {
          "left": 10,
          "top": 10,
          "width": 200,
          "height": 30,
          "title": "标题",
          "fontSize": 14,
          "fontWeight": "bold"
        },
        "printElementType": {
          "title": "文本",
          "type": "text"
        }
      }
    ]
  }],
  "printData": { ... }
}

快捷键

| 快捷键 | 功能 | |--------|------| | Delete | 删除选中元素 |

开发说明

项目结构

hiprintEx/
├── src/
│   ├── components/
│   │   └── PrintDesigner.vue   # 设计器主组件
│   ├── App.vue                  # 根组件
│   └── main.js                  # 入口文件
├── index.html
├── vite.config.js
└── package.json

核心功能

1. 拖拽系统 - 原生 HTML5 拖拽 + 鼠标事件实现
2. 对齐系统 - 自动计算对齐位置和吸附
3. 渲染系统 - 实时预览和打印预览
4. 数据绑定 - 动态字段绑定和数据预览

浏览器兼容性

• Chrome (推荐)
• Firefox
• Safari
• Edge

License

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

联系作者：邮箱