PDF-Blob nicht zeigen von Inhalten, Winkel 2

Problem habe ich sehr ähnlich wie diese PDF-Blob - Pop-up-Fenster nicht anzeigen von content, aber ich bin mit Winkel-2. Die Antwort auf die Frage war, responseType zu arrayBuffer, aber es nicht funktioniert, im Winkel 2, der Fehler der reponseType existiert nicht in Typ RequestOptionsArgs. Ich habe auch versucht, um es zu erweitern, indem BrowserXhr, aber noch nicht arbeiten (https://github.com/angular/http/issues/83).

Mein code ist:

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

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

Und die Methode handleResponse:

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, saveAs-Methode aus FileSaver.js aber es ist das gleiche problem, die pdf-Datei geöffnet, der Inhalt wird jedoch nicht angezeigt. Dank

InformationsquelleAutor Loutocký | 2016-05-05

  1. 57

    Hatte ich eine Menge Probleme mit dem herunterladen und zeigen von Inhalten der PDF, die ich wahrscheinlich verschwendet einen Tag oder zwei, um es zu beheben, so werde ich nach der Arbeit Beispiel dafür, wie erfolgreich PDF herunterladen oder öffnen im neuen tab:

    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 erweitern Http Klasse hinzufügen headers alle Ihre Anfragen oder so etwas wie, dass, es kann auch zu Problemen für den Download von PDF, denn Sie werden das überschreiben RequestOptions ist, wo wir hinzufügen responseType: ResponseContentType.Blob - und diese erhalten Sie The request body isn't either a blob or an array buffer Fehler.

    Vielen Dank für den Hinweis - das ist mein problem gelöst!!!
    Sie sind sehr willkommen! Um ehrlich zu sein, ich glaube nicht, jemand anderes würde stolpern das gleiche problem. 🙂
    Der res.blob() war, was mir fehlte. Die meisten Beispiele die ich gesehen habe, nur tun [res]
    Dies war für mich perfekt, ich war den Umgang mit und das Bild, kein pdf
    Ich habe eine Frage zum Umgang mit dem Fall, wenn http verlängert hinzufügen JWT jede Anfrage. Sind Sie bereit zu helfen? Hier ist der link.

    InformationsquelleAutor Stefan Svrkota

  2. 1

    WINKEL 5

    Ich hatte das gleiche problem, das ich verloren habe wenige Tage an.

    Hier meine Antwort vielleicht anderen helfen, die geholfen, Rendern von pdf.

    Für mich, obwohl, wenn ich erwähne, wie responseType : "arraybuffer", es war nicht in der Lage, es zu nehmen.

    Für Sie, dass Sie brauchen, um zu erwähnen, wie responseType : 'arraybuffer' als 'json'.(Referenz)

    Funktionierenden code

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

    Bezeichnet aus dem folgenden link

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

    InformationsquelleAutor MPPNBD

  3. 0

    Amit,
    Sie können benennen Sie die Dateinamen durch hinzufügen einer Variablen an das Ende der Zeichenfolge
    so saveAs(res, "myPDF.pdf");

    Wird 

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

    wo someVariable könnte ein counter oder mein persönlicher Favorit, ein Datum-Uhrzeit-Zeichenfolge.

    Sorry für die Antwort, ich dachte, ich hinzufügen es als ein Kommentar zu Amit ' s Frage.

    InformationsquelleAutor Ken

Schreibe einen Kommentar