Angular+Spring：如何在同一HTTP请求中实现文件转换进度上报与下载？

先说结论：可以在同一个POST请求里同时实现进度更新和大Zip文件下载，核心是利用HTTP的分块传输编码（Chunked Transfer Encoding），把进度信息和Zip二进制数据分块发送，前后端配合解析即可。

前端（Angular）+ 后端（Spring）具体实现 #

后端（Spring） #

Spring本身支持分块传输，直接用StreamingResponseBody就能自动启用分块模式。核心思路是：在生成Zip的过程中，每处理一批文件就把进度数据作为一个独立的响应块发出去，全部文件处理完后，发送一个结束标记，再输出Zip的二进制内容。

示例代码：

@PostMapping("/download-zip")
public StreamingResponseBody generateAndDownloadZip(@RequestBody List<String> fileIds, HttpServletResponse response) {
    // 设置响应头，告诉前端是混合内容（进度文本+Zip二进制）
    response.setContentType("multipart/mixed");
    response.setHeader("Content-Disposition", "attachment; filename=archive.zip");

    return outputStream -> {
        try (ZipOutputStream zipOut = new ZipOutputStream(outputStream)) {
            int totalFiles = fileIds.size();
            int processedCount = 0;

            for (String fileId : fileIds) {
                // 读取目标文件并写入Zip流
                File targetFile = getFileById(fileId);
                zipOut.putNextEntry(new ZipEntry(targetFile.getName()));
                Files.copy(targetFile.toPath(), zipOut);
                zipOut.closeEntry();

                // 计算进度并发送进度块
                processedCount++;
                int progress = (int) ((processedCount * 100.0) / totalFiles);
                String progressJson = String.format("{\"progress\": %d}\n", progress);
                // 立即刷新输出流，确保前端能实时收到进度
                outputStream.write(progressJson.getBytes(StandardCharsets.UTF_8));
                outputStream.flush();
            }

            // 发送进度结束标记，告诉前端接下来是Zip数据
            String endMarker = "---PROGRESS_COMPLETE---\n";
            outputStream.write(endMarker.getBytes(StandardCharsets.UTF_8));
            outputStream.flush();

            // 完成Zip打包
            zipOut.finish();
        } catch (IOException e) {
            // 发送错误信息给前端
            String errorJson = String.format("{\"error\": \"%s\"}\n", e.getMessage());
            outputStream.write(errorJson.getBytes(StandardCharsets.UTF_8));
            outputStream.flush();
            throw e;
        }
    };
}

前端（Angular） #

用HttpClient发送请求时，要监听分块的响应内容，拆分出进度数据和Zip二进制部分：

• 先处理进度块，解析成JSON更新UI；
• 收到结束标记后，把后续的内容转换成Blob，触发下载。

示例代码：

downloadSelectedFiles(fileIds: string[]): void {
  const request = new HttpRequest('POST', '/api/download-zip', fileIds, {
    responseType: 'text',
    reportProgress: true,
    observe: 'events'
  });

  this.http.request(request).subscribe({
    next: (event) => {
      if (event.type === HttpEventType.DownloadProgress && event.partialText) {
        const receivedContent = event.partialText;
        const endMarker = '---PROGRESS_COMPLETE---\n';
        const markerPosition = receivedContent.indexOf(endMarker);

        if (markerPosition !== -1) {
          // 解析并更新进度
          const progressContent = receivedContent.substring(0, markerPosition);
          progressContent.split('\n').filter(line => line.trim())
            .forEach(line => {
              try {
                const progressData = JSON.parse(line);
                this.downloadProgress = progressData.progress;
              } catch (err) { /* 忽略无效行 */ }
            });

          // 提取Zip二进制内容并触发下载
          const zipContent = receivedContent.substring(markerPosition + endMarker.length);
          const zipBlob = new Blob([zipContent], { type: 'application/zip' });
          this.initiateDownload(zipBlob);
        } else {
          // 只有进度数据，直接更新
          receivedContent.split('\n').filter(line => line.trim())
            .forEach(line => {
              try {
                const progressData = JSON.parse(line);
                this.downloadProgress = progressData.progress;
              } catch (err) { /* 忽略无效行 */ }
            });
        }
      }
    },
    error: (err) => {
      console.error('下载出错:', err);
      this.showError('下载失败，请稍后重试');
    }
  });
}

private initiateDownload(blob: Blob): void {
  const downloadUrl = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = 'archive.zip';
  document.body.appendChild(link);
  link.click();
  window.URL.revokeObjectURL(downloadUrl);
  document.body.removeChild(link);
}

关键注意点 #

• 分隔符防冲突：要选一个几乎不会出现在Zip二进制里的字符串当结束标记，比如上面的---PROGRESS_COMPLETE---，避免和Zip内容混淆导致解析错误。
• 内存优化：后端必须用流式输出，绝对不能把20GB的Zip加载到内存里；前端依赖Angular的分块接收，也不会一次性加载全部数据，内存压力可控。
• 异常处理：后端出错时要及时发送错误JSON块，前端收到后要终止流程并提示用户，别让用户一直等。

退而求其次的方案：SSE+单下载请求 #

如果觉得混合分块解析太麻烦，也可以用SSE单独传进度，进度完成后再触发下载：

• 后端开个SSE接口，生成Zip时实时发进度，同时把生成好的Zip存到临时目录，生成一个临时下载URL；
• 前端订阅SSE更新进度，收到完成信号后，用HttpClient请求临时URL下载Zip，下载完通知后端删掉临时文件。

这个方案逻辑更简单，但服务器要占磁盘空间存大Zip，得做好定时清理临时文件的机制。

内容的提问来源于stack exchange，提问作者Somsky