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());
}
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());
}
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 :)
Für Angular 5 wurde ResponseContentType
deprecated , 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);
}