observables - ¿Cómo recibir respuestas de blob usando el módulo 2+ @ angular/http de Angular?

que es un observable en angular

Question

Estoy tratando de proporcionar una descarga de pdf desde una aplicación angular 2 ...

este código funciona:

    var reportPost = ''variable=lsdkjf'';

    var xhr = new XMLHttpRequest();

    xhr.open("POST", "http://localhost/a2/pdf.php", true);
    xhr.responseType = ''blob'';
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function() {//Call a function when the state changes.
        if(xhr.readyState == 4 && xhr.status == 200) {
            var blob = new Blob([this.response], {type: ''application/pdf''});
            saveAs(blob, "Report.pdf");
        }
    }

    xhr.send(reportPost);

pero me hubiera gustado usar el cliente Http incorporado de angular 2.

un poco de investigación:

• Documentos angulares no escritos al momento de la publicación: https://angular.io/docs/js/latest/api/http/ResponseTypes-enum.html
• No estoy seguro de si esto se aplica, pero el parámetro rxjs responseType parece incluir solo text y json: https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/doc/operators/ajax.md

y algún código de prueba:

    var headers = new Headers();
    headers.append(''Content-Type'', ''application/x-www-form-urlencoded'');

    this.http.post(''http://localhost/a2/pdf.php'', reportPost,  {
        headers: headers
        })
        .retry(3)
        // .map( (res:any) => res.blob() ) // errors out
        .subscribe(
          (dataReceived:any) => {
            var blob = new Blob([dataReceived._body], {type: ''application/pdf''});
            saveAs(blob, "Report.pdf");
          },
          (err:any) => this.logError(err),
          () => console.log(''Complete'')
        );

PD. La función saveAs viene de aquí: https://github.com/eligrey/FileSaver.js

Answer 1

Con @4.3, @5 y HttpClientModule , terminé haciendo:

this.http.post(`${environment.server}/my/download`,
                data, 
                {responseType: ''blob'', observe: ''response''})
              .map( res => ({content: res.body, 
                             fileName: res.headers.get(''content-filename'')}));

Answer 2

Con el lanzamiento de Angular2 final podemos definir, por ejemplo, un servicio:

@Injectable()
export class AngularService {

    constructor(private http: Http) {}

    download(model: MyModel) { //get file from service
        this.http.post("http://localhost/a2/pdf.php", JSON.stringify(model), {
            method: RequestMethod.Post,
            responseType: ResponseContentType.Blob,
            headers: new Headers({''Content-Type'', ''application/x-www-form-urlencoded''})
        }).subscribe(
            response => { // download file
                var blob = new Blob([response.blob()], {type: ''application/pdf''});
                var filename = ''file.pdf'';
                saveAs(blob, filename);
            },
            error => {
                console.error(`Error: ${error.message}`);
            }
        );
    }
}

Este servicio obtendrá el archivo y luego lo entregará a un usuario.

Ejemplo para archivo zip: cómo utilizar JAX-RS y Angular 2+ para descargar un archivo zip

Answer 3

Consulte aquí: https://.com/a/45666313/4420532

return this._http.get(''/api/images/'' + _id, {responseType: ''blob''}).map(blob => {
  var urlCreator = window.URL;
  return this._sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob));
})