# vue-print

**Repository Path**: ymaai/vue-print

## Basic Information

- **Project Name**: vue-print
- **Description**: 基于Vue3 + TypeScript + Lodop实现的打印模板设计系统，支持可视化拖拽设计打印模板。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 4
- **Created**: 2025-03-22
- **Last Updated**: 2026-01-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 打印模板设计系统

基于Vue3 + TypeScript + Lodop实现的打印模板设计系统，支持可视化拖拽设计打印模板。

## 功能特点

- 基于Vue3+TypeScript+Element Plus开发
- 使用Lodop打印控件实现高质量打印
- 可视化拖拽设计打印模板，所见即所得
- 支持多种打印元素：文本、图片、条码、线条、矩形、表格等
- 模板本地存储，方便导入导出

## 技术栈

- Vue 3
- TypeScript
- Pinia (状态管理)
- Vue Router
- Element Plus (UI组件库)
- Lodop (打印控件)

## 安装使用

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 运行单元测试

```bash
npm run test:unit
```

### 运行端到端测试

```bash
npm run test:e2e
```

### 代码检查和格式化

```bash
npm run lint
```

## 使用说明

1. 首次使用时，需要安装Lodop打印控件(http://www.lodop.net/)
2. 进入"打印模板管理"页面，可以创建新模板或编辑已有模板
3. 在设计器中可以通过拖拽添加各种打印元素，并设置其属性
4. 设计完成后可以预览打印效果或保存模板

## 项目结构

```
src/
  ├── assets/         # 静态资源
  ├── components/     # 组件
  │   └── print/      # 打印相关组件
  ├── router/         # 路由配置
  ├── stores/         # 状态管理
  ├── types/          # TypeScript类型定义
  ├── utils/          # 工具函数
  │   └── print/      # 打印相关工具
  └── views/          # 页面视图
```

## Lodop集成

本项目使用Lodop打印控件来实现打印功能。在使用前需要：

1. 下载并安装[Lodop打印控件](http://www.lodop.net/download.html)
2. 在项目中引入Lodop相关API

## 注意事项

- 打印前请确保已正确安装Lodop打印控件
- 打印模板数据存储在浏览器本地存储中，清除浏览器数据会导致模板丢失
- 实际生产环境中建议将模板数据存储到服务器