如何使用角度从java接收文件csv

Question

我有一个返回 file.csv 的 rest api 然后我检查响应是200，数据也在responsed.body。

但是浏览器没有下载 csv 文件。

这里是 API：

ResponseEntity<Resource>  exportCsv() throws IOException {
    /*
     *
     */
    InputStreamResource resource = new InputStreamResource(new FileInputStream(file));


    HttpHeaders headers = new HttpHeaders();
    headers.add("Content-disposition", "attachment; filename=sample.csv");
    headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
    headers.add("Pragma", "no-cache");
    headers.add("Expires", "0");

    return ResponseEntity.ok()
                         .headers(headers)
                         .contentLength(file.length())                 
                .contentType(MediaType.parseMediaType("text/csv"))
                         .body(resource);
}

这是 Angular

this.stickService.exportCsv( this.stickSearch ).subscribe(
  response => this.downloadFile(response),
  err => console.log('Error downloading the file.'  + err.message 
));


downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'text/csv' });
  const url = window.URL.createObjectURL(blob);
  window.open(url);
}


exportCsv( stickSearch: StickSearch ): Observable<any> {
  const headers = this.oAuthService.putTokenInHeaders(this.headers);

  let params = new HttpParams({encoder: new HttpURIEncoder()});

  if (stickSearch.searchString() !== '') {
    params = params
    .append('search', stickSearch.searchString())
  }

  return this.httpClient.get(this.exportCsvUrl + '/exportCsv',
  {
    responseType: 'text',
    params: params,
    headers
  });
}

我在响应正文中得到了正确的数据。

但是下载失败。 'Error downloading the file.Http failure during parsing for myURL '

感谢您的帮助

现在可以了，这是结果 非常感谢！

Answer 1

我可以看到您正在获取服务器提供的输出，然后从该 CSV 构建一个 URL。那将没有必要。 如果您只想下载 CSV，那么您所缺少的只是 Java 代码中的以下内容：

headers.add("Content-disposition", "attachment; filename=sample.csv");

一旦有了标头，就可以摆脱downloadFile 方法，并可能将this.httpClient.get 请求更改为window.open。

看看这是否能解决您的问题并在任何一种情况下提供反馈。

Answer 2

默认情况下HttpClient 期望来自服务器的数据将以json 格式出现。 Angular 尝试将文本正文解析为 json。这会导致异常。在stickService 中，当您请求数据时，您必须将类型或结果指定为text：

constructor (private httpClient: HttpClient){
}

public exportCsv(stickSearch: any) {
    return httpClient.get('http://someurl', {responseType: 'text'});
}

您使用window.open(url) 的另一点。大多数浏览器默认阻止弹出窗口。所以也许使用锚元素会更好。

downloadFile(data: Response) {
    const blob = new Blob([data], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);
    const anchor = document.createElement('a');
    anchor.download = 'myfile.txt'; // here you can specify file name
    anchor.href = url;
    document.body.appendChild(anchor);
    anchor.click();
    document.body.removeChild(anchor);
}

Answer 3

这是我用于此功能的。 首先，使用“接受”标题。 其次，将responseType设置为'text'，默认为'json'。 三、下载代码。

getCsv(): Observable<any> {
  let headers = new HttpHeaders();
  headers = headers.set('Accept', 'application/csv');

  return this.http.get('SOME__URL', {
    headers: headers,
    responseType: 'text'
  });
}

exportReportCSV() {
  getCsv().subscribe( response => {
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(new Blob([response], {type: 'text/csv'}));
    link.download = this.report.name + '.csv';
    link.click();
});