PDF Blobにコンテンツが表示されない、角度2

Question

このPDF Blob - Pop up window not showing contentとよく似た問題がありますが、角度2を使用しています。応答はarrayBufferに設定していましたが、Angular 2では機能しません。 reponseTypeはRequestOptionsArgs型には存在しません。私もBrowserXhrで拡張しようとしましたが、まだ動作しません（https://github.com/angular/http/issues/83）。

私のコードは次のとおりです。

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

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

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

私もFileSaver.jsからSaveAsメソッドを試してみましたが、それは同じ問題で、PDFファイルが開きますが、コンテンツは表示されません。ありがとう

Answer 1

私はPDFの内容をダウンロードして表示するのに多くの問題を抱えていましたが、おそらく1〜2日は無駄でしたので、PDFをダウンロードしたり新しいタブで開く方法の実例を投稿します。

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 

     } 
    ); 

NOTE

あなたがどこである、RequestOptionsを上書きしますので、あなたがすべてのあなたの要求またはそのような何かにheadersを追加するHttpクラスを拡張している場合、それはまた、PDFをダウンロードするための問題を作成できることも言及する価値がありますresponseType: ResponseContentType.Blobを追加してください。これにより、The request body isn't either a blob or an array bufferエラーが発生します。あなたは、文字列の末尾に変数を追加することで、ファイル名の名前を変更することができ

Answer 2

アミットは、 のでsaveAs(res, "myPDF.pdf");

はsomeVariableはカウンタであるかもしれない

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

または私の個人的な好みの日付時刻になると文字列。