wake-up-neo.com

PDF Blob zeigt keinen Inhalt an, Winkel 2

Ich habe ein sehr ähnliches Problem/ PDF Blob - Popup-Fenster zeigt keinen Inhalt an , aber ich verwende Angular 2. Die Antwort auf Frage war, responseType auf arrayBuffer zu setzen, aber es funktioniert nicht in Angular 2 Der Fehler ist, dass der ReponseType im Typ RequestOptionsArgs nicht vorhanden ist. Ich habe auch versucht, es durch BrowserXhr zu erweitern, aber es funktioniert immer noch nicht ( https://github.com/angular/http/issues/83 ).

Mein Code lautet:

createPDF(customerServiceId: string) {
   console.log("Sending GET on " + this.getPDFUrl + "/" + customerServiceId);

   this._http.get(this.getPDFUrl + '/' + customerServiceId).subscribe(
       (data) => {
            this.handleResponse(data);
         });
}

Und die handleResponse-Methode:

handleResponse(data: any) {
     console.log("[Receipt service] GET PDF byte array " + JSON.stringify(data));

     var file = new Blob([data._body], { type: 'application/pdf' });            
     var fileURL = URL.createObjectURL(file);
     window.open(fileURL);
 }

Ich habe auch versucht, die SaveAs-Methode von FileSaver.js zu speichern, aber es ist dasselbe Problem. PDF wird geöffnet, der Inhalt wird jedoch nicht angezeigt. Vielen Dank

pdfangularbytearrayblob
13
Loutocký

Ich hatte viele Probleme beim Herunterladen und Anzeigen von PDF-Inhalten. Ich habe wahrscheinlich ein oder zwei Tage damit verschwendet, das Problem zu beheben. Daher werde ich ein Arbeitsbeispiel für das erfolgreiche Herunterladen von PDF oder das Öffnen in einem neuen Tab posten:

myService.ts 

downloadPDF(): any {
        return this._http.get(url, { responseType: ResponseContentType.Blob }).map(
        (res) => {
            return new Blob([res.blob()], { type: 'application/pdf' })
        }
}

myComponent.ts 

this.myService.downloadPDF().subscribe(
        (res) => {
            saveAs(res, "myPDF.pdf"); //if you want to save it - you need file-saver for this : https://www.npmjs.com/package/file-saver

        var fileURL = URL.createObjectURL(res);
        window.open(fileURL); / if you want to open it in new tab

        }
    );

HINWEIS

Es ist auch erwähnenswert, dass wenn Sie die Http-Klasse erweitern, um headers alle Ihre Anforderungen oder ähnliches hinzuzufügen, dies zu Problemen beim Herunterladen von PDF führen kann, da Sie RequestOptions überschreiben, wo wir responseType: ResponseContentType.Blob und hier hinzufügen erhalten Sie The request body isn't either a blob or an array buffer Fehler.

59
Stefan Svrkota

ANGULAR 5

Ich hatte das gleiche Problem, das ich einige Tage verloren habe.

Hier kann meine Antwort anderen helfen, was dazu beigetragen hat, pdf zu erstellen. 

Für mich, obwohl ich als responseType erwähne: 'arraybuffer', konnte er es nicht nehmen. 

Dafür müssen Sie als responseType angeben: 'arraybuffer' als 'json'. ( Reference )

Arbeitscode

downloadPDF(): any {
    return this._http.get(url, {  responseType: 'blob' as 'json' }).subscribe((res) => {
        var file = new Blob([res], { type: 'application/pdf' });            
        var fileURL = URL.createObjectURL(file);
        window.open(fileURL);
    }
}

Bezogen auf den untenstehenden Link

https://github.com/angular/angular/issues/18586

1
MPPNBD

Amit, Sie können den Dateinamen umbenennen, indem Sie am Ende des Strings eine Variable hinzufügenso saveAs(res, "myPDF.pdf"); 

Wird 

saveAs(res, "myPDF_"+someVariable+".pdf");

wobei someVariable ein Zähler sein kann oder mein persönlicher Favorit eine Datumszeitzeichenfolge.

0
Ken