Mantén la atención ya que en este tutorial vas a hallar el arreglo que buscas.
Solución:
Cuando usas observe:responseno escriba la llamada (post), ya que el Observable devuelto será de HttpResponse. Así que 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(url: string, body: any | null, options: string[];
;
reportProgress?: boolean;
responseType?: 'json';
withCredentials?: boolean;
): Observable>;
/**
* 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:
[param: string]: string ;
reportProgress?: boolean;
responseType: 'arraybuffer';
withCredentials?: boolean;
): Observable>;
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 el tipo de respuesta, el tipo de retorno de la respuesta se cambia a Blob. Para solucionar esto agrega observe: 'response' que devuelve HTTPResponse.
Ejemplo:
Me topé con este problema y pasé 6 horas resolviéndolo.
Entonces, aquí presento un ejemplo para obtener el nombre del archivo de los encabezados y descargar el archivo:
downloadPDF(url: string): Observable {
return this.http.get(url, responseType: 'blob', observe: 'response' ).pipe(
map((result:HttpResponse) =>
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 el resultado. encabezados y no su encabezado personalizado, 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, resuelva esto, tendría que cambiar el servidor/API para enviar Acceso-Control-Exponer-Encabezados encabezado con la solicitud.
Si te animas, eres capaz de dejar una reseña acerca de qué te ha impresionado de esta sección.