# ldesign-report

**Repository Path**: ldesign-v1/ldesign-report

## Basic Information

- **Project Name**: ldesign-report
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-11
- **Last Updated**: 2026-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @ldesign/report

报表设计器核心模块 - 可视化报表编排与打印报表

## 📋 项目简介

`@ldesign/report` 是一个功能完整的报表设计器核心库。它提供了可视化报表设计器、丰富的报表元素、数据绑定、打印支持等功能，适用于企业报表系统、数据分析平台、打印报表等场景。

## ✨ 核心特性

### 🎨 可视化设计
- **拖拽式设计** - 可视化拖拽布局
- **网格对齐** - 网格对齐与吸附
- **元素操作** - 选择、移动、缩放、复制、删除
- **多选操作** - 支持多选与组合

### 📊 报表元素
- **文本元素** - 静态文本、动态文本
- **表格元素** - 数据表格、交叉表格
- **图表元素** - 柱状图、折线图、饼图等
- **图片元素** - 静态图片、动态图片
- **条形码** - 一维码、二维码
- **线条矩形** - 装饰线条、矩形框

### 📈 数据绑定
- **数据源管理** - 多种数据源支持
- **字段绑定** - 元素与数据字段绑定
- **表达式计算** - 支持表达式计算
- **动态更新** - 数据动态更新

### 🖨️ 打印功能
- **打印预览** - 打印效果预览
- **页面设置** - 纸张大小、方向、边距
- **批量打印** - 支持批量打印
- **导出功能** - 导出为PDF、图片

### 🎯 其他功能
- **历史记录** - 撤销、重做
- **主题切换** - 亮色/暗色主题
- **响应式设计** - 自适应屏幕大小

## 🚀 快速开始

### 安装

```bash
# 使用npm
npm install @ldesign/report

# 使用pnpm
pnpm add @ldesign/report

# 使用yarn
yarn add @ldesign/report
```

### 基础使用

```typescript
import { createReportDesigner, createReportViewer } from '@ldesign/report'

// 创建报表设计器
const designer = createReportDesigner({
  container: '#designer',
  width: 794, // A4宽度（210mm * 3.78）
  height: 1123, // A4高度（297mm * 3.78）
  theme: 'light',
  grid: {
    enabled: true,
    size: 10,
    snap: true,
  },
  zoom: 1,
})

// 添加文本元素
designer.addElement({
  type: 'text',
  x: 50,
  y: 50,
  width: 200,
  height: 30,
  content: '报表标题',
  fontSize: 18,
  fontWeight: 'bold',
  textAlign: 'center',
})

// 添加表格元素
designer.addElement({
  type: 'table',
  x: 50,
  y: 100,
  width: 694,
  height: 400,
  columns: [
    { field: 'name', title: '姓名', width: 100 },
    { field: 'age', title: '年龄', width: 80 },
    { field: 'address', title: '地址', width: 200 },
  ],
  data: [
    { name: '张三', age: 25, address: '北京市' },
    { name: '李四', age: 30, address: '上海市' },
  ],
})

// 导出报表配置
const config = designer.export()

// 创建报表查看器
const viewer = createReportViewer({
  container: '#viewer',
  config,
  data: reportData,
})

// 打印报表
viewer.print()

// 导出为PDF
await viewer.exportPDF('report.pdf')
```

### 事件监听

```typescript
// 元素添加事件
designer.on('element-add', (element) => {
  console.log('添加元素：', element)
})

// 元素删除事件
designer.on('element-remove', (element) => {
  console.log('删除元素：', element)
})

// 元素更新事件
designer.on('element-update', (element) => {
  console.log('更新元素：', element)
})

// 选择变化事件
designer.on('selection-change', (elements) => {
  console.log('选择变化：', elements)
})

// 历史变化事件
designer.on('history-change', (canUndo, canRedo) => {
  console.log('撤销：', canUndo, '重做：', canRedo)
})
```

### 数据绑定

```typescript
// 绑定数据源
designer.setDataSource({
  name: 'users',
  data: [
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 },
  ],
})

// 绑定字段
designer.addElement({
  type: 'text',
  x: 50,
  y: 50,
  width: 200,
  height: 30,
  binding: {
    field: 'users.name',
    defaultValue: '未命名',
  },
})
```

### 导出与打印

```typescript
// 导出配置
const config = designer.export()

// 导入配置
designer.import(config)

// 打印预览
designer.preview()

// 打印
designer.print()

// 导出为PDF
await designer.exportPDF('report.pdf')

// 导出为图片
await designer.exportImage('report.png')
```

## 📁 项目结构

```
report/
├── packages/
│   ├── core/                    # 核心库
│   │   ├── src/
│   │   │   ├── index.ts        # 模块入口
│   │   │   ├── core/
│   │   │   │   ├── report-engine.ts # 报表引擎
│   │   │   │   ├── event-emitter.ts # 事件总线
│   │   │   │   ├── element-manager.ts # 元素管理器
│   │   │   │   ├── selection-manager.ts # 选择管理器
│   │   │   │   ├── history-manager.ts # 历史管理器
│   │   │   │   └── drag-drop-manager.ts # 拖拽管理器
│   │   │   ├── elements/
│   │   │   │   ├── element-factory.ts # 元素工厂
│   │   │   │   └── element-defaults.ts # 元素默认值
│   │   │   ├── data/
│   │   │   │   └── data-manager.ts # 数据管理器
│   │   │   ├── print/
│   │   │   │   └── print-manager.ts # 打印管理器
│   │   │   ├── renderer/
│   │   │   │   ├── dom-renderer.ts # DOM渲染器
│   │   │   │   └── style-manager.ts # 样式管理器
│   │   │   ├── theme/
│   │   │   │   ├── theme-manager.ts # 主题管理器
│   │   │   │   └── tokens.ts # 主题令牌
│   │   │   ├── types/
│   │   │   │   └── index.ts # 类型定义
│   │   │   └── utils/
│   │   │       └── index.ts # 工具函数
│   │   └── package.json
│   └── vue/                     # Vue组件封装
│       ├── src/
│       └── package.json
├── playground/                  # 演示应用
├── package.json                 # 项目配置
└── README.md                    # 项目文档
```

## 🔧 API 参考

### createReportDesigner 函数

```typescript
createReportDesigner(config: ReportDesignerConfig): ReportDesignerInstance
```

### ReportDesigner 类

#### 元素操作
- `addElement(element)` - 添加元素
- `removeElement(id)` - 删除元素
- `updateElement(id, data)` - 更新元素
- `moveElement(id, position)` - 移动元素
- `resizeElement(id, size)` - 调整元素大小

#### 选择操作
- `selectElement(id)` - 选择元素
- `selectAll()` - 全选
- `deselectAll()` - 取消全选
- `getSelectedElements()` - 获取选中元素

#### 历史操作
- `undo()` - 撤销
- `redo()` - 重做
- `canUndo()` - 是否可撤销
- `canRedo()` - 是否可重做

#### 导入导出
- `export()` - 导出配置
- `import(config)` - 导入配置
- `preview()` - 打印预览
- `print()` - 打印
- `exportPDF(filename?)` - 导出为PDF
- `exportImage(filename?)` - 导出为图片

#### 事件与销毁
- `on(event, handler)` - 监听事件
- `off(event, handler)` - 取消事件监听
- `destroy()` - 销毁实例

## 📊 报表元素类型

| 元素类型 | 说明 | 配置项 |
|----------|------|--------|
| `text` | 文本元素 | content, fontSize, fontWeight, textAlign |
| `table` | 表格元素 | columns, data, pagination |
| `chart` | 图表元素 | type, data, options |
| `image` | 图片元素 | src, alt, objectFit |
| `barcode` | 条形码元素 | content, format, width, height |
| `line` | 线条元素 | direction, length, style |
| `rect` | 矩形元素 | fill, stroke, borderRadius |

## 📱 使用场景

1. **企业报表系统** - 企业内部报表设计
2. **数据分析平台** - 数据可视化报表
3. **打印报表** - 打印格式报表
4. **发票设计** - 发票模板设计
5. **证书设计** - 证书模板设计

## 🔗 相关模块

- `@ldesign/report-vue` - Vue组件封装
- `@ldesign/table` - 表格组件
- `@ldesign/chart` - 图表组件
- `@ldesign/print` - 打印组件

## 📄 许可证

MIT License

## 🤝 贡献指南

欢迎提交Issue和Pull Request。在提交代码前，请确保：

1. 代码符合项目编码规范
2. 添加相应的单元测试
3. 更新相关文档
4. 考虑性能优化

## 📞 联系方式

- 项目维护：LDesign Team
- 问题反馈：通过GitHub Issues提交
- 官方文档：[项目Wiki](https://github.com/ldesign/report/wiki)

---

**注意**：本模块支持所有现代浏览器，包括Chrome、Firefox、Safari、Edge等。