Angular 6 Descargando archivo desde la API de descanso

Indagamos en internet para así mostrarte la solución para tu problema, si tienes preguntas déjanos tu duda y te responderemos con mucho gusto, porque estamos para servirte.

Solución:

Resolví el problema de esta manera (tenga en cuenta que fusioné varias soluciones encontradas en el desbordamiento de pila, pero no puedo encontrar las referencias. Siéntase libre de agregarlas en los comentarios).

En Mi servicio tengo:

public getPDF(): Observable    
//const options =  responseType: 'blob' ; there is no use of this
    let uri = '/my/uri';
    // this.http refers to HttpClient. Note here that you cannot use the generic get as it does not compile: instead you "choose" the appropriate API in this way.
    return this.http.get(uri,  responseType: 'blob' );

En el componente, tengo (esta es la parte fusionada de múltiples respuestas):

public showPDF(): void 
    this.myService.getPDF()
        .subscribe(x => 
            // It is necessary to create a new blob object with mime-type explicitly set
            // otherwise only Chrome works like it should
            var newBlob = new Blob([x],  type: "application/pdf" );

            // IE doesn't allow using a blob object directly as link href
            // instead it is necessary to use msSaveOrOpenBlob
            if (window.navigator && window.navigator.msSaveOrOpenBlob) 
                window.navigator.msSaveOrOpenBlob(newBlob);
                return;
            

            // For other browsers: 
            // Create a link pointing to the ObjectURL containing the blob.
            const data = window.URL.createObjectURL(newBlob);

            var link = document.createElement('a');
            link.href = data;
            link.download = "Je kar.pdf";
            // this is necessary as link.click() does not work on the latest firefox
            link.dispatchEvent(new MouseEvent('click',  bubbles: true, cancelable: true, view: window ));

            setTimeout(function () 
                // For Firefox it is necessary to delay revoking the ObjectURL
                window.URL.revokeObjectURL(data);
                link.remove();
            , 100);
        );

El código anterior funciona en IE, Edge, Chrome y Firefox. Sin embargo, no me gusta mucho, ya que mi componente está lleno de cosas específicas del navegador que seguramente cambiarán con el tiempo.

Lo resolví de la siguiente manera:

// header.component.ts
this.downloadService.getPdf().subscribe((data) => 

  this.blob = new Blob([data], type: 'application/pdf');

  var downloadURL = window.URL.createObjectURL(data);
  var link = document.createElement('a');
  link.href = downloadURL;
  link.download = "help.pdf";
  link.click();

);



//download.service.ts
getPdf() 

  this.authKey = localStorage.getItem('jwt_token');

  const httpOptions = 
    responseType: 'blob' as 'json',
    headers: new HttpHeaders(
      'Authorization': this.authKey,
    )
  ;

  return this.http.get(`$this.BASE_URL/help/pdf`, httpOptions);

Comentarios y valoraciones

Si posees algún reparo y forma de aumentar nuestro tutorial te inspiramos ejecutar una apostilla y con gusto lo interpretaremos.

---

---

Utiliza Nuestro Buscador