How to Retrieve Filename From a Blob Response in Angular

If you're new to Angular, you might be wondering how to retrieve a filename from an API response.

Imagine you have a method that makes a POST request to a remote API and receives a Blob containing a file:

public downloadExcel(data): void {

  const url: string = '[api endpoint here ]';

  this.http.post(url, data.body, { responseType: 'blob' })

    .subscribe((response: Blob) => saveAs(response, data.fileName + '.xlsx'));

}

According to MDN, Blob objects only contain a size and type, so you'll need another way to get the actual filename.

But since data is passed as a parameter to your function, it's possible that it also includes the payload from the server. Log it to the console and see what information is included.

Reading the response headers

Another possible option is to read the HTTP response headers themselves.

Since you're fetching data from an API, it's likely that you're using httpClient to make the request. Often API responses include helpful information in the header.

One thing to look at is the X-Token entry. But keep in mind that not all headers can be accessed from the client side, so access-control-expose-headers will need to be set from the server side.

If X-Token is exposed, you can use the HTTP method { observe: 'response' } to get the full response, then log X-Token to the console:

It's also worth reading up on response headers in general.