如何使用流从服务器下载 csv 文件答案

【问题标题】：How to download csv file from server using stream如何使用流从服务器下载 csv 文件
【发布时间】：2019-01-07 16:29:08
【问题描述】：

我正在尝试从动态生成的服务器下载巨大的 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 (fetch) 发送请求

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);
                });
        }

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

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

【问题讨论】：

标签： javascript stream aurelia

【解决方案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

【讨论】：