downloading xlsx file in angular 2 with blob
Solution 1
After nothing works. I changed my server to return the same byte array with the addition of:
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
response.setHeader("Content-Disposition", "attachment; filename=deployment-definitions.xlsx");
At my client I deleted the download function and instead of the GET part i did:
window.open(this.restUrl, "_blank");
This is the only way I found it possible to save an xlsx file that is not corrupted.
If you have a answer about how to do it with blob please tell me :)
Solution 2
I was having the same problem as yours - fixed it by adding responseType: ResponseContentType.Blob
to my Get options. Check the code below:
public getReport(filters: ReportOptions) {
return this.http.get(this.url, {
headers: this.headers,
params: filters,
responseType: ResponseContentType.Blob
})
.toPromise()
.then(response => this.saveAsBlob(response))
.catch(error => this.handleError(error));
}
The saveAsBlob() is just a wrapper for the FileSaver.SaveAs():
private saveAsBlob(data: any) {
const blob = new Blob([data._body],
{ type: 'application/vnd.ms-excel' });
const file = new File([blob], 'report.xlsx',
{ type: 'application/vnd.ms-excel' });
FileSaver.saveAs(file);
}
Solution 3
you can use the below code :
var file = new Blob([data], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
});
saveAs(file,"nameFile"+".xlsx");
deferred.resolve(data);
reut
Updated on July 05, 2022Comments
-
reut almost 2 years
I want to download xlsx file from the client on angular 2 using rest api.
I'm getting a byte array as a response from my GET request and I'm sending it to download function with subscribe:
let options = new RequestOptions({ search: params }); this.http.get(this.restUrl, options) .subscribe(this.download);
download function using blob:
download(res: Response) { let data = new Blob([res.arrayBuffer()], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' }); FileSaver.saveAs(data, this.fileName);};
my problem is that my file is corrupted all the time. I tried a lot of versions of this but nothing works.
** also tried it with this solution and it doesn't works (the xlsx file is still corrupted) - Angular 2 downloading a file: corrupt result , the difference is that my data is an array Buffer and not string or json, and there is a difference between PDF and xlsx.
10x!
-
hewstone almost 7 yearsThis is what I ended up having to do. I tried to use the url creation from a blob and the browser could not figure out how to open the file. I tried all the methods in this post plus many others. stackoverflow.com/questions/35138424/… The solution you provided worked perfectly. Thanks!!!
-
Ameya Salagre over 5 yearsHats off to you,You save my day @reut
-
Cumulo Nimbus over 5 yearsWorks! The key piece I was missing with my issue was setting
responseType: 'blob'
(using axios), did not even need theconst file = ...
. Just made ablob
then didFileSaver.saveAs(blob, 'report.xlsx')
-
Sanjay Tiwari almost 5 yearsHi This also works for me but i have change
responseType: 'blob'
, this works for me of both files.csv
&.xlsx
type files. Please find my code....return this.http.get(url, { headers: headers, responseType: 'blob', observe: 'response' });
-
Soumya Gangamwar almost 4 yearsUsing above approach how to pass the data from client to server to dowload specific data. Can you please help
-
Parth Developer almost 3 yearsyes, It worked, but I needed to add this also, to work
let headers = new HttpHeaders();
headers = headers.append('Accept', '*/*; charset=utf-8');
return this.http.get('/api/v1/file/stores/download' , {
headers: headers,
observe: 'response',
params: paramsRef,
responseType: 'blob'
});