Hello!

I am trying to convert text / csv to blob so that the user can download the csv file by the button.

What I have: There is an API (Java 8 with RESTEasy), when accessing one of the POST methods, the output returns text / csv:

POSTMAN Response Headers Answer body in POSTMAN Method code in the Java API (jax-rs)

There is a web client on Angular 7 and it will discuss the problem in it ... When you click on the button, the following code works:

exportSourceTableToCsv() { this.api.postExportToCsv(this.tableSource.toTable()) .toPromise() .then(res => this.saveFile(res)); } public postExportToCsv(table: Table): Observable<any> { return this.httpClient.post<any>( apiConfig.EXPORT_TO_CSV, table); } saveFile(response) { //Вот тут я так понимаю проблемное место const blob = new Blob([response._body], { type: 'text/csv' }); saveAs(blob, "table.csv"); //Плагин file-saver из npm для сохранения файлов. }

When calling the last method, an error is displayed:

 ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":200,"statusText":"OK","url":"http://localhost:4200/table/export","ok":false,"name":"HttpErrorResponse","message":"Http failure during parsing for http://localhost:4200/table/export","error":{"error":{},"text":"1;2;33\r\n23;23;33\r\n213;321;33\r\n123;3;33\r\n213;123;33\r\n"}} at resolvePromise (zone.js:831) at resolvePromise (zone.js:788) at zone.js:892 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Object.onInvokeTask (core.js:17280) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) at drainMicroTaskQueue (zone.js:601) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502) at invokeTask (zone.js:1744)

The answer is like in Postman from a browser (the same preview)

How can this be fixed? Saw many examples with exactly the same approach, should work

I tried to explicitly specify the charset and also text as the source type when creating a Blob - did not help. The type of return value for the method in the API is not very important for me, but I would like to use the CSV intended for transmission - text / csv

Thank!

  • this.httpClient.post<any>( apiConfig.EXPORT_TO_CSV, table, { responseType: 'arraybuffer' }) - definitely the json server returns to your server - overthesanity

1 answer 1

Like that:

 return this.httpClient .post<any>( apiConfig.EXPORT_TO_CSV, table, { headers: new HttpHeaders({ 'Content-Type': 'text/csv' }), observe: 'response', responseType: 'blob' }) .subscribe(file => saveAs(file, "table.csv"));
  • We must also add that the problem lies in the Angulyarovsky http client. He considers this format just text, you need to use the native client - Xambey