wqs_printer

Print Designer

A Vue 3 based print designer component library

Installation

npm install print-designer

Usage

import { PrintDesigner } from 'print-designer'
import 'print-designer/dist/style.css'

// Register components
app.use(PrintDesigner)

Features

• Drag-and-drop print template designer
• Support for various print elements (Text, Image, Barcode, QRCode, etc.)
• Customizable property panels
• Responsive design

License

MIT

打印模板设计器

一个基于 Vue 3 + Vite 开发的可视化打印模板设计器，支持拖拽式设计、多页面管理、数据绑定和打印预览等功能。

✨ 核心功能

📐 画布设计

• 多页面管理：支持创建、切换、删除多个页面
• 纸张配置：支持 A4、A5、自定义尺寸，横向/纵向切换
• 页眉页脚：支持拖拽调整页眉页脚高度，单位为毫米(mm)
• 网格辅助：可开启网格显示，辅助元素对齐
• 标尺系统：横向和纵向标尺，精确定位元素位置
• 自动布局：支持绝对定位和流式布局两种模式

🎨 组件库

基础组件

• 文本：单行文本，支持字段绑定
• 多行文本：多行文本，支持换行
• 表格：动态列管理，支持数据源绑定和自动分页
• 页码：自动显示页码，支持多种格式

图形组件

• 图片：支持URL加载和字段绑定
• 二维码：支持内容绑定和边距调整
• 条形码：支持多种条码格式
• 圆形：可调整大小、边框、填充色
• 多边形：支持三角形、矩形、五边形等
• 横线/竖线：分割线，可调整颜色和粗细

🎯 编辑功能

• 拖拽添加：从组件面板拖拽组件到画布
• 自由移动：拖拽元素自由移动位置
• 尺寸调整：八个控制点调整元素大小
• 旋转：支持元素旋转（开发中）
• 多选操作：Ctrl/Cmd 多选，批量操作
• 撤销/重做：Ctrl+Z 撤销，Ctrl+Y 重做
• 快捷键：Delete 删除，Ctrl+C/V 复制粘贴（开发中）

📊 数据绑定

• 字段绑定：文本、图片、二维码等组件支持字段绑定
• 数据源绑定：表格支持数组数据源绑定
• 预览测试：预览时可输入JSON数据测试绑定效果
• 动态渲染：打印时自动填充数据

👁️ 预览与打印

• 实时预览：所见即所得的预览效果
• 缩放控制：30%-200% 缩放查看细节
• 多页显示：垂直排列显示所有页面
• 自动分页：表格数据超长自动分页
• 页眉页脚重复：页眉页脚元素在每页重复显示
• 浏览器打印：生成HTML打印预览
• 数据面板：测试数据输入，支持JSON格式

🎛️ 属性面板

• 元素属性：位置、尺寸、样式等详细配置
• 画布属性：纸张类型、方向、尺寸、页眉页脚
• 选项卡分类：基础属性、样式属性分离
• 实时预览：修改属性实时更新画布

📦 资源管理

• 历史记录：操作历史列表，可回退到任意状态
• 资源管理器：管理模板、图片等资源（开发中）

🚀 快速开始

安装依赖

npm install

开发模式

npm run dev

生产构建

npm run build

预览构建结果

npm run preview

🛠️ 技术栈

• 框架：Vue 3 + Vite
• 状态管理：Pinia
• UI组件：Naive UI
• 图标库：@vicons/ionicons5
• 二维码：bwip-js
• 样式：SCSS

📖 使用指南

1. 添加组件

从左侧组件面板拖拽组件到画布，或点击组件自动添加到画布中心。

2. 编辑元素

• 移动：拖拽元素移动位置
• 调整大小：拖拽八个控制点调整尺寸
• 修改属性：右侧属性面板修改详细配置

3. 数据绑定

• 单值组件（文本、二维码等）：设置 fieldName 字段名
• 集合组件（表格）：设置 dataSource 数据源名称
• 列字段映射：表格列配置 field 属性映射数据字段

4. 表格使用

• 添加表格组件到画布
• 在属性面板配置列（列名、字段名、宽度）
• 设置数据源名称（如 items）
• 预览时输入测试数据：

{
  "items": [
    { "name": "产品A", "price": "100" },
    { "name": "产品B", "price": "200" }
  ]
}

5. 页眉页脚

• 在画布属性面板设置页眉/页脚高度（单位：mm）
• 拖拽画布上的虚线调整高度
• 将元素放置在页眉/页脚区域
• 预览时这些元素会在每页重复显示

6. 预览与打印

• 点击预览按钮打开预览窗口
• 在数据面板输入测试数据（JSON格式）
• 使用缩放控制查看细节
• 点击打印按钮选择浏览器打印或直接打印

📝 开发说明

项目结构

src/
├── components/          # 组件目录
│   ├── Text/           # 文本组件
│   ├── Table/          # 表格组件
│   ├── PageNumber/     # 页码组件
│   ├── QRCode/         # 二维码组件
│   ├── Barcode/        # 条形码组件
│   ├── Image/          # 图片组件
│   ├── Circle/         # 圆形组件
│   ├── Polygon/        # 多边形组件
│   ├── HorizontalLine/ # 横线组件
│   ├── VerticalLine/   # 竖线组件
│   ├── MultiLineText/  # 多行文本组件
│   ├── PropertyPanel.vue      # 属性面板
│   ├── CanvasPropertyPanel.vue # 画布属性面板
│   ├── PreviewModal.vue       # 预览模态框
│   ├── HistoryPanel.vue       # 历史记录面板
│   ├── ResourcePanel.vue      # 资源管理面板
│   ├── Ruler.vue             # 标尺组件
│   └── registry.js           # 组件注册中心
├── stores/             # Pinia状态管理
│   └── designer.js     # 设计器状态
├── utils/              # 工具函数
│   ├── elementGenerators/  # 元素HTML生成器
│   ├── print.js           # 打印功能
│   ├── wqsPrint.js        # 打印管理器
│   └── wqsTemplate.js     # 模板管理器
├── App.vue             # 主应用
├── main.js             # 入口文件
└── style.css           # 全局样式

添加新组件

• 在 src/components/ 创建组件目录
• 创建 index.vue（组件视图）
• 创建 config.js（组件配置）
• 创建 PropertyPanel.vue（属性面板）
• 在 registry.js 注册组件
• 在 utils/elementGenerators/ 添加HTML生成器

🎯 设计原则

• 组件化：每个元素都是独立的Vue组件
• 配置驱动：通过配置对象定义组件行为
• 数据绑定：支持字段绑定和数据源绑定
• 所见即所得：设计效果与打印效果一致
• 扩展性：易于添加新组件和功能

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！