Question

我正在尝试从正在动态生成的服务器下载巨大的CSV文件。我以异步方式返回ResponseEntity<StreamingResponseBody>，因此，一旦我拥有部分数据，我就会立即将其返回。这是我的控制器代码：

StreamingResponseBody streamingResponseBody = out -> {
     csvService.exportToCsvBySessionId(applicationId, sessionIdsInRange, out, tags);
}
return ResponseEntity.ok()
    .headers(csvService.getHeaders(CSV_FILE_NAME))
    .body(streamingResponseBody);

在我要添加的标题中

produces: text\csv; Content-Disposition: attachment; filename=%s.csv;

在客户端上，我使用aurelia框架并使用HttpClient（提取）发送请求

public getFraudAlertsCsv() {
            this.serverProxy.fetch(`/sessions/fraud/csv)
                .then(response => { 
                    logger.debug('waiting for response');
                    return response.blob());
                .then((blob: Blob) => this.donwnloadCsv(blob, `Fraud_Alerts_${new Date()}.csv`))
                .catch( (err)=> {
                    this.logger.error("Failed to get appSessionId sessions csv file", err);
                });
        }

即使我在网络分析中可以看到我的请求开始得到响应（它的大小增加了），也没有弹出窗口要求下载文件，并且日志不会打印“等待响应”。而是我正在下载整个文件，下载的是整个响应到达的时间（服务器关闭流时）。

我想显示下载进度，我该怎么办？

Answer 1

我认为fetch还不支持progress API，因此您可能要使用传统的XHR并使用onprogress或progress事件：

xhr.onprogress = function updateProgress(oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total * 100;
    // ...
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

注意：代码示例取自MDN页面https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

如何使用流从服务器下载CSV文件

1 个答案: