Java vue实现导出进度条

原创

mob64ca12f09e0c 2024-11-30 06:51:40 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12f09e0c的原创作品，请联系作者获取转载授权，否则将追究法律责任

Java Vue实现导出进度条的完整指南

在现代Web应用中，用户导出数据的功能是非常常见的，而提供一个直观的进度条可以提升用户体验。本文将分步讲解如何使用Java和Vue实现导出数据时的进度条。我们将通过以下几个步骤来完成这个需求。

整体流程

步骤	描述
1	前端Vue组件创建
2	后端Java服务端创建
3	数据导出逻辑实现
4	进度条机制实现
5	组件与服务端的连接
6	测试与优化

以下是整个流程的可视化展示：

flowchart TD
    A[前端Vue组件创建] --> B[后端Java服务端创建]
    B --> C[数据导出逻辑实现]
    C --> D[进度条机制实现]
    D --> E[组件与服务端的连接]
    E --> F[测试与优化]

步骤详细说明

1. 前端Vue组件创建

首先我们需要在Vue中创建一个组件来展示导出的进度条。下面是一个简单的Vue组件示例：

<template>
  <div>
    <button @click="exportData">导出数据</button>
    <div v-if="progress">
      <p>导出进度: {{ progress }}%</p>
      <progress :value="progress" max="100"></progress>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0, // 进度条初始值为0
    }
  },
  methods: {
    exportData() {
      this.progress = 0; // 重置进度
      // 调用后端服务进行数据导出，并监控进度
      this.fetchExportData();
    },
    async fetchExportData() {
      // 发送请求到后端导出数据
      const response = await fetch('/api/export-data');
      const reader = response.body.getReader();
      const contentLength = +response.headers.get('Content-Length');
      let receivedLength = 0; // 当前接收到的长度
      let chunks = []; // 用于存储获取到的chunk

      while(true) {
        const {done, value} = await reader.read();
        if (done) break;
        chunks.push(value);
        receivedLength += value.length;
        // 更新进度条
        this.progress = Math.round((receivedLength / contentLength) * 100);
      }
    }
  }
}
</script>

在上述代码中，我们创建了一个按钮用于开始导出，并实现了进度条的更新逻辑。

2. 后端Java服务端创建

在后端，我们需要创建一个控制器来处理导出请求。以下是相关代码示例：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ExportController {
    @GetMapping("/api/export-data")
    public ResponseEntity<InputStreamResource> exportData() {
        // 设置响应头
        HttpHeaders headers = new HttpHeaders();
        headers.add("Content-Disposition", "attachment; filename=data.csv");

        // 使用流式方式进行数据导出
        InputStreamResource resource = new InputStreamResource(generateCsv());
        
        return ResponseEntity.ok()
                .headers(headers)
                .contentLength(contentLength) // 根据需要设置内容长度
                .contentType(MediaType.parseMediaType("text/csv"))
                .body(resource);
    }

    private InputStream generateCsv() {
        // 这里包含生成CSV的逻辑
    }
}

在这段代码中，我们创建了一个导出数据的API接口，并通过流的方式返回CSV文件。

3. 数据导出逻辑实现

数据导出的具体实现可以根据需求而定。这里提供一个简单的CSV生成示例：

private InputStream generateCsv() {
    StringWriter stringWriter = new StringWriter();
    // 使用CSV写库写入数据
    CSVWriter csvWriter = new CSVWriter(stringWriter);
    csvWriter.writeNext(new String[]{"header1", "header2"}); // 写入表头

    // 模拟数据生成的过程
    for (int i = 0; i < 100; i++) {
        csvWriter.writeNext(new String[]{"data1-" + i, "data2-" + i});
        // 这里可以加上sleep模拟导出进度
        // 根据实现的需要分割输出
        // e.g. if (i % 20 == 0) flushDataToClient();
    }
    csvWriter.close();
    
    return new ByteArrayInputStream(stringWriter.toString().getBytes());
}