2016-08-20 9 views
2

この前の質問には、いくつかの良い回避策た:angular2 RC5のAPIからPDFをダウンロードするにはどうすればよいですか?

Angular 2 download PDF from API and Display it in View

を今そのRC5は、我々は()arrayBufferを使用することができています。私はこれでどこにも行けないようだ。どのように私は素敵なPDFブロブにここから行くのですか:

return this._authHttp.get(this.fileUrl+id) 
     .map((res:Response) => res.arrayBuffer()) 
     .subscribe(
      data => { 
       console.log(data); 
       var blob = new Blob([data], {type: 'application/pdf'}); 
       console.log(blob); 
       saveAs(blob, "testData.pdf"); 

     }, 
      err => console.error(err), 
     () => console.log('done') 
    ); 

データは、私が期待される2倍の大きされて終わります。私は何が欠けているすべてのアイデア?

答えて

10

pdfファイルのダウンロード中に同じ問題が発生しました。私はこれを修正するために2日を無駄にしたが、それは最終的に働いた。 responseTypeをblobに設定する必要があります。

return this._authHttp.get(this.fileUrl+id , 
         { responseType: ResponseContentType.Blob }) 
    .map((res:Response) => res.blob()) 
    .subscribe(
     data => { 
      console.log(data); 
      var blob = new Blob([data], {type: 'application/pdf'}); 
      console.log(blob); 
      saveAs(blob, "testData.pdf"); 

    }, 
     err => console.error(err), 
    () => console.log('done') 
); 

そして、これはあなたに

+0

優秀!! responseTypeはそれを行いました。私はlet blob = new Blob([response ['_ body']]、{type: 'application/pdf'})を使用しました。 – Hari

+0

こんにちはKira、上記の解決策を試していますが、私はsaveAsの問題があります。私はエラーが発生するTS2304:名前 'saveAs'を見つけることができません –

+0

@mayowaogundeleあなたはhttps://github.com/eligrey/FileSaver.jsを含める必要があります – Obaid

0

おかげで男を助けResponseContentType

希望をインポートすることを忘れてはいけない...

このハック、...おかげで私の人生を変えます。しかし、私は軽い変更を行います。

 this._authHttp.get(URLx, { responseType: ResponseContentType.Blob }) 
     .map((res:any) => return res) <-- this line change --!> 
     .subscribe( 
      data => { 
       var mediaType = 'application/pdf'; 
       var blob = new Blob([data], {type: mediaType}); 
       var filename = `Veiculo-Eixos-${veiculoDTO.placa}.pdf`; 
       // saveAs(blob, filename); 
       var fileURL = URL.createObjectURL(blob); 
       window.open(fileURL); // if you want to open it in new tab 
      }, 
      error =>{ 
       console.log(error); 
      }); 
関連する問題