webentwicklung-frage-antwort-db.com.de

Angular 2 RC 5 Versuchen, abzurufen und anzuzeigen a PDF von einem Server

Ich versuche, ein PDF, das von einem Server generiert wird, in einer Ansicht in meinem Angular 2 RC 5-Projekt anzuzeigen. Im Moment gibt der ASPNETCORE-Server das Objekt als 'application/pdf' zurück, und der Angular -Client versucht, die Antwort als Blob zu analysieren. Ich erhalte jedoch folgende Fehlermeldung auf der Clientseite: 

Error: The request body isn't either a blob or an array buffer

Der Code, den ich zum Aufrufen des PDF-Servers verwende, ist im Wesentlichen:

getHeaders() : Headers {
    var headers = new Headers({
        'responseType': 'application/blob'
    });
    return headers;
}

getBlob() {
    return this.http.get(uri, new RequestOptions({headers: this.getHeaders()}, body: "" }))
    .map(response => (<Response>response).blob());
}
11
John

Versuchen Sie, den responseType auf Blob zu setzen. Es sollte funktionieren:

getBlob() {
return this.http.get(uri, {responseType: ResponseContentType.Blob})
.map(response => (<Response>response).blob());

}

23
fleske

Funktioniert bei mir : 

Komponente: 

downloadInvoice(invoice) {
  this.loading = true;
  this.invoiceDataService
  .downloadInvoice(invoice)
  .subscribe(
    (blob) => {
      FileSaver.saveAs(blob, 'test.pdf');
    },
    error => this.error = error,
    () =>  {
      this.loading = false;
      console.log('downloadInvoices : Request Complete')
    }
  )
}

Datendienst:

downloadInvoice(invoice): Observable<Blob> {
  return this.api.downloadInvoice(invoice);
}

API-Dienst: 

downloadInvoice(invoice: Invoice):  Observable<Blob> {
  return this.authHttp
  .get(this.apiBase + '/invoices/' + invoice.hashid + '/download', {responseType: ResponseContentType.Blob})
  .map(response => {
    return new Blob([response.blob()], {type: 'application/pdf'});
  })
  .catch(this.handleError.bind(this));
}

Genießen :)

1
Mikhaël Gerbet

Für Angular 5 wurde ResponseContentTypedeprecated , und eine aktuelle Lösung, die ich gefunden habe, war:

getFile(): Observable<File> {
    let options = {
        headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
        responseType: 'blob' as 'json'
    };
    return this.http.get<File>(uri, options);
}
0