# JS打印设计器

**Repository Path**: legend0/print

## Basic Information

- **Project Name**: JS打印设计器
- **Description**: 一个专注于JavaScript的打印设计器开源项目，提供灵活的页面布局与打印预览功能，适用于web应用中的报表和文档打印需求。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-21
- **Last Updated**: 2025-11-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JS打印设计器

一个基于HTML、CSS和JavaScript的可视化打印模板设计器，支持拖拽添加多种元素组件，可以设计和预览打印模板。

## 功能特性

- 可视化拖拽设计界面
- 支持多种元素组件：
  - 文本组件
  - 多行文本组件
  - 图片组件
  - 条码组件
  - 二维码组件
  - 线条组件
  - 矩形组件
  - 表格组件
  - HTML组件
- 多种画布尺寸预设（A4、A5、发票、收据等）
- 元素属性编辑功能
- 模板导出/导入功能
- 实时预览功能
- 画布缩放功能（支持鼠标滚轮缩放和按钮控制）
- 元素旋转功能
- 元素调整大小功能
- 事件日志功能
- 键盘快捷键支持
  - 方向键移动元素
  - Delete键删除元素
  - Shift键锁定极轴旋转
  - Ctrl+G 锁定/解锁元素
  - Ctrl+Z 撤销操作
  - Ctrl+Y 重做操作
  - Ctrl+P 打印画布
  - Ctrl+鼠标滚轮缩放画布
  - +/-按钮：放大/缩小画布
  - 100%按钮：重置画布缩放到100%
- 网格对齐功能
  - 可视化网格显示
  - 元素自动对齐到网格
  - 网格大小自定义
- 撤销/重做功能
  - 支持所有编辑操作的撤销和重做
  - 最多保存50步历史记录
- 元素锁定功能
  - 可锁定元素防止意外移动或修改
  - 锁定状态下元素属性仍可编辑
- 文本样式增强
  - 支持文本加粗和斜体样式
  - 支持下划线和删除线样式

## 快速开始

### 使用方法

1. 直接在浏览器中打开 `index.html` 文件
2. 从左侧组件库中拖拽需要的组件到设计区域
3. 点击元素可编辑其属性
4. 使用顶部工具栏按钮进行预览、导出或导入操作

### 项目结构

```
.
├── index.html          # 主页面
├── index.css           # 样式文件
├── PrintDesigner.js    # 核心功能实现
├── JsBarcode.all.min.js # 条码生成库
└── qrcode.min.js       # 二维码生成库
```

## 组件说明

### 文本组件
- 可设置文本内容、字体、大小、颜色等属性
- 支持文本对齐方式设置
- 支持文本加粗、斜体、下划线、删除线样式

### 多行文本组件
- 支持多行文本输入
- 可设置文本内容、字体、大小、颜色等属性
- 支持文本对齐方式设置
- 支持行高设置
- 支持文本加粗、斜体、下划线、删除线样式

### 图片组件
- 可设置图片URL和替代文本
- 支持在线图片链接
- 支持本地图片上传
- 支持通过API上传图片
- 支持点击上传按钮选择本地图片文件
- 支持拖拽上传图片文件

### 条码组件
- 支持多种条码格式（CODE128、EAN13等）
- 可自定义条码内容、尺寸和颜色

### 二维码组件
- 可设置二维码内容
- 支持自定义尺寸和颜色

### 线条组件
- 可设置线条粗细和颜色
- 支持左右两侧控制点调整线条长度
- 保持线条粗细不变，仅调整长度

### 矩形组件
- 可设置边框粗细、颜色和背景色
- 支持圆角设置（左上、右上、右下、左下四个角可分别设置）

### 表格组件
- 可设置行列数
- 支持自定义边框、字体、背景色等
- 可双击单元格编辑内容
- 支持表头和普通单元格的不同样式设置
- 支持单元格内边距设置

### HTML组件
- 可嵌入自定义HTML内容
- 支持复杂的HTML结构和样式
- 支持背景颜色设置
- 可用于嵌入复杂的布局和富文本内容

## 画布设置

支持以下预设尺寸：
- A4 (210×297mm)
- A5 (148×210mm)
- 发票 (80×140mm)
- 收据 (76×130mm)

也支持自定义画布尺寸。

## 事件日志

设计器会在左侧面板底部显示操作事件日志，记录用户的操作历史，方便调试和追踪设计过程。

## 操作说明

1. **添加元素**：从左侧组件库拖拽组件到设计区域
2. **选择元素**：单击设计区域中的元素
3. **移动元素**：拖拽选中的元素
4. **调整大小**：拖拽元素边缘的控制点
5. **旋转元素**：拖拽元素上方的旋转控制点（线条组件不支持旋转）
6. **编辑属性**：双击元素或在选中后在右侧属性面板中修改
7. **删除元素**：选中元素后点击属性面板中的删除按钮
8. **显示画布设置**：点击设计区域空白处或初始化时，右侧属性区域显示画布设置

### 元素调整大小
- 选中元素后，元素四周会出现调整大小的控制点
- 拖拽控制点可以调整元素的宽度和高度
- 按住Shift键可以锁定宽高比例进行等比缩放
- **线条组件特殊处理**：仅显示左右两侧控制点，用于调整线条长度，保持线条粗细不变

### 元素旋转
- 选中元素后，元素上方会出现旋转控制点
- 拖拽旋转控制点可以旋转元素
- 按住Shift键可以将旋转角度锁定为45度的倍数
- **线条组件不支持旋转**

## 键盘快捷键

- **方向键**：移动选中的元素
- **Shift + 方向键**：加速移动选中的元素
- **Delete键**：删除选中的元素
- **Ctrl + 鼠标滚轮**：缩放画布
- **+/-按钮**：放大/缩小画布
- **100%按钮**：重置画布缩放到100%
- **Ctrl + Z**：撤销操作
- **Ctrl + Y**：重做操作

## 模板操作

- **导出模板**：将当前设计保存为JSON文件
- **导入模板**：从JSON文件加载设计
- **预览**：在新窗口中预览打印效果
- **清空画布**：清除所有元素

## 网格功能

设计器支持网格对齐功能，可以帮助用户更精确地定位元素：

- **网格显示**：在画布上显示可视化网格
- **网格对齐**：元素移动时自动对齐到网格点
- **网格自定义**：可自定义网格大小和颜色
- **网格开关**：可随时启用或禁用网格功能

## 撤销/重做功能

设计器支持完整的撤销/重做功能：

- **撤销操作**：使用Ctrl+Z或通过API调用撤销上一步操作
- **重做操作**：使用Ctrl+Y或通过API调用重做已撤销的操作
- **历史记录**：最多保存50步操作历史记录

## 元素锁定功能

为了防止意外修改重要元素，设计器支持元素锁定功能：

- **锁定元素**：可将元素锁定，防止移动、调整大小或旋转
- **解锁元素**：可随时解锁已锁定的元素
- **属性编辑**：即使元素被锁定，仍可编辑其属性

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 依赖库

- [JsBarcode](https://github.com/lindell/JsBarcode) - 条码生成库
- [qrcode.js](https://github.com/soldair/node-qrcode) - 二维码生成库

## 许可证

MIT