How to download an excel file in Angular 8 as an API response

Question

I\'ve an API which returns an excel document as response. The request will be one simple json.

I\'ve searched google and found some code base to download the file and I

Answer 1

1. You need to set the response-header { responseType: 'blob'} in the request.

2. You need to pass in the correct MIME-Type as you'are creating the blob-file. (f.e. application/octet-stream or application/vnd.openxmlformats-officedocument.spreadsheetml.sheet).

component.ts

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

Answer 2

Set response-header { responseType: 'blob'} in the request.

To download the excel, use the below function.

response - api response, fileName- excel name

downloadExcel(response, fileName) {
    // Doing it this way allows you to name the file
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(res);
    link.download = fileName;
    link.click();
  }

Answer 3

To download the file use the below code

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'application/octet-stream' });
  fs.saveAs(blob, fileName + '.xlsx');
}

Answer 4

While using { responseType: 'blob'} as said by most answers here works, I'd suggest using responseType: 'arraybuffer' instead of blob with observe: 'response'. Your call would then look like this:

this.httpClient.get(resource, {
  headers: this.httpHeaders, // Any custom client side headers like Authorization
  observe: 'response',
  responseType: 'arraybuffer'
});

The advantage of this is two-fold:

1. Arraybuffer is a generic stream of bytes and the Blob object can be created using either a blob or an arraybuffer, using the Content-Type
2. observe: 'response' will also include the response headers that you set at the server in the parsed response.

I use this method to put the filename and the MIME Type of the arraybuffer in the Content-Disposition and Content-Type response headers and then use a generic download service at the client-side.

Also, I would suggest using a File object instead of just the Blob, which gives you the flexibility of giving it a filename like so:

public downloadFile(response: any, fileName?: string) {
    const blob = new Blob([response.body], { type: response.headers.get('content-type') });
    fileName = fileName || response.headers.get('content-disposition').split(';')[0];
    const file = new File([blob], fileName, { type: response.headers.get('content-type') });
    saveAs(file);
}

This will also solve the problem that @knbibin raised about using a custom filename.

Answer 5

Add header { responseType: 'blob'}

Like this:

this.http.post<any>(apiEndpoint,request,{ responseType: 'blob'} )

Answer 6

You need to Add { responseType : 'application/octet-stream'} in your get request as No need to call post method

{ responseType : 'application/octet-stream'}

And in .ts file

DownLoadExcel(){
    this.MprService.downLoadRFQInfoExcel(this.revisionId).subscribe(data =>{this.downloadFile(data)});
}
    
downloadFile(data: Blob) { 
    const contentType = 'application/vnd.openxmlformats-ficedocument.spreadsheetml.sheet'; 
    const blob = new Blob([data], { type: contentType });
    const url = window.URL.createObjectURL(blob);
    window.open(url);
}