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.