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

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.

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

Add header { responseType: 'blob'}

Like this:

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

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