# 表格导出功能实现

## 功能概述

为使用时长页面实现了表格数据导出功能，支持将表格数据导出为CSV格式文件。

## 实现内容

### 1. 导出工具函数 (`src/utils/exportExcel.ts`)

创建了通用的导出工具函数，支持：
- 数据格式验证
- CSV格式导出
- 中文编码支持
- 错误处理和用户反馈

### 2. 使用时长页面集成 (`src/views/count/engagement/time/index.vue`)

在原有页面基础上添加了：
- 导出按钮UI组件
- 导出功能实现
- 数据格式化处理
- 错误处理机制

## 功能特点

### 导出按钮样式
- 蓝色主题按钮
- 包含导出图标
- 悬停效果
- 响应式设计

### 数据处理
- 自动格式化表格数据
- 支持多系列数据导出
- 包含启动次数和占比信息
- 文件名包含日期信息

### 用户体验
- 导出成功/失败提示
- 数据验证（空数据检查）
- 错误处理机制
- 自动下载文件

## 使用方法

1. 在使用时长页面，点击"导出"按钮
2. 系统会自动生成包含当前数据的CSV文件
3. 文件会自动下载到浏览器默认下载目录
4. 文件名格式：`使用时长数据_YYYY-MM-DD.csv`

## 技术实现

### 导出格式
- 使用CSV格式，兼容Excel打开
- 支持中文编码（UTF-8 with BOM）
- 自动处理特殊字符（逗号、引号等）

### 数据格式
```csv
时长,2025-01-01启动次数,2025-01-01启动次数占比
1秒-3秒,100,25%
4秒-10秒,150,37.5%
...
```

### 依赖库
- 使用原生JavaScript实现
- 无需额外依赖
- 兼容所有现代浏览器

## 扩展性

该导出功能设计为通用工具，可以轻松扩展到其他页面：
1. 导入导出工具函数
2. 准备数据格式
3. 调用导出函数

## 注意事项

1. 确保数据格式正确
2. 大量数据导出时可能需要等待
3. 浏览器需要允许下载权限
4. 建议在数据加载完成后再进行导出操作