# SSE 导出文件进度显示

**Repository Path**: loveball/sse-export

## Basic Information

- **Project Name**: SSE 导出文件进度显示
- **Description**: 基于SSE(Server-Sent Events)技术实现的文件导出功能，支持实时进度显示
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-03-15
- **Last Updated**: 2025-03-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SSE导出插件使用文档

## 功能介绍

基于SSE(Server-Sent Events)技术实现的文件导出功能，支持实时进度显示。主要特点：
- 实时显示导出进度
- 支持大文件导出
- 异步处理不阻塞
- 使用简单，配置灵活

## DEMO视频

[video.mp4](docs%2Fvideo.mp4)

## 快速开始

### 1. 引入必要文件

```html
<!-- 引入Layui -->
<link href="//unpkg.com/layui@2.10.0/dist/css/layui.css" rel="stylesheet">
<script src="//unpkg.com/layui@2.10.0/dist/layui.js"></script>
<!-- 引入导出插件 -->
<script src="/js/sse-export.js"></script>
```

### 2. 添加导出按钮

```html
<button class="export-btn">导出Excel</button>
```

### 3. 初始化插件

```javascript
new SseExport({
    processUrl: '/api/user/process',  // 处理接口URL
    params: {                         // 导出时其他查询参数
        fileName: '测试导出',
        sheetName: '数据'
    }
});
```

## 配置选项

```javascript
{
    processUrl: '/api/user/process',  // 处理接口URL（必填）
    params: {},                        // 导出参数（必填）
    btnSelector: '.export-btn',        // 按钮选择器（可选，默认.export-btn）
    sseUrl: '/api/export/sse',        // SSE接口URL（可选）
    downloadUrl: '/api/export/download', // 下载接口URL（可选）
    onStart: function(taskId) {},      // 开始回调（可选）
    onProgress: function(percentage, processed, total) {}, // 进度回调（可选）
    onComplete: function(taskId) {},   // 完成回调（可选）
    onError: function(message) {}      // 错误回调（可选）
}
```

## 高级用法

### 1. 自定义回调函数

```javascript
new SseExport({
    processUrl: '/api/user/process',
    params: {
        fileName: '测试导出',
        sheetName: '数据'
    },
    onProgress: (percentage, processed, total) => {
        console.log(`进度：${percentage}%, 已处理：${processed}/${total}`);
    },
    onComplete: (taskId) => {
        console.log('导出完成，任务ID：', taskId);
    },
    onError: (message) => {
        console.error('导出失败：', message);
    }
});
```

### 2. 多个导出按钮

```html
<button class="export-btn-1">导出用户</button>
<button class="export-btn-2">导出订单</button>

<script>
// 用户数据导出
new SseExport({
    btnSelector: '.export-btn-1',
    processUrl: '/api/user/process',
    params: {
        fileName: '用户数据',
        type: 'user'
    }
});

// 订单数据导出
new SseExport({
    btnSelector: '.export-btn-2',
    processUrl: '/api/order/process',
    params: {
        fileName: '订单数据',
        type: 'order'
    }
});
</script>
```

## 后端接口要求

### 1. SSE接口 (/api/export/sse)
- 创建SSE连接
- 发送进度更新事件

### 2. 处理接口 (/api/user/process/{taskId})
- 接收导出参数
- 处理数据并生成文件
- 通过SSE发送进度

### 3. 下载接口 (/api/export/download/{taskId})
- 根据任务ID返回文件


## 现有项目改造指南

### 1. 后端改造

如果您已经有了导出功能，需要改造以下几个方面：

#### 1.1 添加通用接口
将该包放入项目中，路径为：
[common](src%2Fmain%2Fjava%2Fvip%2Flsjscl%2Fdemo%2Fcommon)

#### 1.2 改造处理接口
参考
[UserDataProcessor.java](src%2Fmain%2Fjava%2Fvip%2Flsjscl%2Fdemo%2Fcustom%2FUserDataProcessor.java)

// 更新任务状态为处理中
taskManager.startProcessing(taskId, total);
//更新进度
taskManager.updateProcessed(taskId, rowIndex - 1);
// 更新任务状态为已完成
taskManager.completeTask(taskId, outputFile.getAbsolutePath());
//失败后的处理
taskManager.failTask(taskId, e.getMessage());

### 2. 前端改造

#### 2.1 移除原有导出代码
```javascript
// 删除原有的导出相关代码
$('#exportBtn').click(function() {
    $.ajax({
        url: '/api/export',
        // ... 其他代码
    });
});
```

#### 2.2 引入插件
```html
<!-- 添加必要的引用 -->
<link href="//unpkg.com/layui@2.10.0/dist/css/layui.css" rel="stylesheet">
<script src="//unpkg.com/layui@2.10.0/dist/layui.js"></script>
<script src="/js/sse-export.js"></script>
```

#### 2.3 调整HTML
```html
<!-- 将原有的导出按钮改造成插件支持的格式 -->
<button class="export-btn">导出Excel</button>
```

#### 2.4 初始化插件
```javascript
// 添加插件初始化代码
new SseExport({
    processUrl: '/api/user/process',  // 原有的处理接口地址
    params: {
        // 原有的导出参数
        fileName: '测试导出',
        sheetName: '数据',
        // 其他查询参数...
        startDate: $('#startDate').val(),
        endDate: $('#endDate').val(),
        type: $('#type').val()
    }
});
```

### 3. 注意事项

1. 确保后端支持长连接
```yaml
# application.yml
server:
  tomcat:
    connection-timeout: 180000  # 3分钟
```

2. 清理临时文件
```java
@Scheduled(cron = "0 0 1 * * ?")  // 每天凌晨1点执行
public void cleanTempFiles() {
    // 清理24小时前的临时文件
    fileService.cleanExpiredFiles();
}
```

通过以上步骤，您可以将现有的导出功能改造成使用此插件的方式，获得更好的用户体验和代码维护性。


## 注意事项

1. 确保服务器支持SSE连接
2. 处理接口应该异步处理数据
3. 定期清理临时文件
4. 合理设置超时时间

## 常见问题

### Q: 导出进度不更新
A: 检查SSE连接是否正常，网络是否通畅

### Q: 文件下载失败
A: 检查文件是否生成完成，下载路径是否正确

### Q: 按钮样式异常
A: 确保正确引入了Layui样式文件

## 浏览器兼容性

- Chrome 45+
- Firefox 40+
- Safari 10+
- Edge 14+

## 依赖项

- Layui 2.x
- 现代浏览器（支持SSE）

## 更新日志

### v1.1.0
- 优化按钮样式
- 添加默认回调函数
- 支持多按钮配置

### v1.0.0
- 首次发布