Solución:
Cuando usas observe:response, no escribas la llamadapost<Blob>(...)), ya que el Observable devuelto será de HttpResponse. Entonces esto debería funcionar:
this.httpclient.post('MyBackendUrl',
params,
{observe: 'response', responseType: 'blob'}
);
Por qué sucede esto, hay dos versiones del método de publicación, una con un tipo genérico y otra sin:
/**
* Construct a POST request which interprets the body as JSON and returns the full event stream.
*
* @return an `Observable` of all `HttpEvent`s for the request, with a body type of `T`.
*/
post<T>(url: string, body: any | null, options: {
headers?: HttpHeaders | {
[header: string]: string | string[];
};
observe: 'events';
params?: HttpParams | {
[param: string]: string | string[];
};
reportProgress?: boolean;
responseType?: 'json';
withCredentials?: boolean;
}): Observable<HttpEvent<T>>;
/**
* Construct a POST request which interprets the body as an `ArrayBuffer` and returns the full response.
*
* @return an `Observable` of the `HttpResponse` for the request, with a body type of `ArrayBuffer`.
*/
post(url: string, body: any | null, options: {
headers?: HttpHeaders | {
[header: string]: string | string[];
};
observe: 'response';
params?: HttpParams | {
[param: string]: string | string[];
};
reportProgress?: boolean;
responseType: 'arraybuffer';
withCredentials?: boolean;
}): Observable<HttpResponse<ArrayBuffer>>;
puedes usar como me gusta
responseType: 'blob' as 'json'
Otras respuestas son correctas pero les falta el ejemplo.
La respuesta principal Primero, cuando se establece responseType, el tipo de retorno de la respuesta se cambia a Blob. Para resolver este complemento observe: 'response' que devuelve HTTPResponse.
Ejemplo:
Me encontré con este problema y pasé 6 horas resolviéndolo.
Entonces, aquí presento un ejemplo para obtener el nombre de archivo de los encabezados y descargar el archivo:
downloadPDF(url: string): Observable<any> {
return this.http.get<any>(url, { responseType: 'blob', observe: 'response' }).pipe(
map((result:HttpResponse<Blob>) => {
console.log(result);
saveAs(result, "Quotation.pdf");
return result;
}));
Aquí el http es una instancia de HttpClient, saveAs() es un método del paquete FileSaver npm igual que el OP.
Hay un problema más: es posible que obtenga solo 5 encabezados (Cache-Control, Pragma, etc.) en result.headers y no su encabezado personalizado para, por ejemplo, x-filename.
La razón detrás de este CORS. Básicamente, CORS no permite que los navegadores accedan a más de un puñado de encabezados (enumerados en el enlace anterior).
Entonces, resuelve esto, tendrías que cambiar el servidor / API para enviar Access-Control-Expose-Headers encabezado con la solicitud.