Come ricevere le risposte BLOB utilizzando il modulo Angular 2+ @ angular/http?

Question

Sto cercando di fornire una scarica il pdf dall'interno di un angolare 2 app ...

questo codice funziona:

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); 

ma mi sarebbe piaciuto usare client HTTP integrato angolare 2 di.

una piccola ricerca:

• docs angolari non scritte al momento del distacco: https://angular.io/docs/js/latest/api/http/ResponseTypes-enum.html
• non so se questo si applica, ma il parametro rxjs responseType sembra per includere solo testo e JSON: https://github.com/Reactive-Extensions/RxJS-DOM/blob/master/doc/operators/ajax.md

e qualche codice di prova:

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') 
     ); 

grazie!

ps. la funzione saveAs viene da qui: https://github.com/eligrey/FileSaver.js

Answer 1

Con il rilascio di Angular2 finale possiamo definire ad esempio un servizio:

@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); 
    }); 
} 

Questo servizio otterrà il file e poi servire a un utente.

Esempio di file zip: How to use JAX-RS and Angular2 to download a zip file

Answer 2

Con @4.3, @5 e HttpClientModule, ho finito per fare:

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

Answer 3

vedere qui: https://stackoverflow.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)); 
})