data-marketing-platform/EXPORT_FEATURE_README.md

表格导出功能实现

功能概述

为使用时长页面实现了表格数据导出功能，支持将表格数据导出为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）
• 自动处理特殊字符（逗号、引号等）

数据格式

时长,2025-01-01启动次数,2025-01-01启动次数占比
1秒-3秒,100,25%
4秒-10秒,150,37.5%
...

依赖库

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

扩展性

该导出功能设计为通用工具，可以轻松扩展到其他页面：

1. 导入导出工具函数
2. 准备数据格式
3. 调用导出函数

注意事项

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