Angular2 PDFを表示

Question

私はASP.Net Web APIを備えたangular2プロジェクトを持っています。私は私のサーバー上のドキュメントに行く私のデータベースからファイルパスを取得するコードがあります。この文書をブラウザに新しいタブで表示したいと思います。誰にどのようにこれを行うための任意の提案がありますか？

私はAngular2（活字体）のいずれか、あるいは私のAPIでファイルを取得し、それをダウンストリームに満足しています。

これは私のAPIでそれを取得する私の試みですが、私はAngular2でそれを受け取り、それを正しく表示する方法を考え出すことはできません。すべてのヘルプを

public HttpResponseMessage GetSOP(string partnum, string description) 
    { 
     var sopPath = _uow.EpicorService.GetSOP(partnum, description).Path; 
     HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK); 
     var stream = new FileStream(sopPath, FileMode.Open); 
     result.Content = new StreamContent(stream); 
     result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream"); 
     return result; 
    } 

をいただければ幸いです。

多くのありがとうございました！得るために

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

次に、：ResponseContentType.BlobにresponseTypeを設定し、blobとして応答を読み、application/pdfにそのタイプを設定するためにblob()を使用 -

Answer 1

まず第一に、あなたはhttpリクエストのオプションを設定する必要がありますファイル、あなたがそれにsubscribeする必要があり、新しいObjectURLを作成して、新しいタブでPDFを開くためにwindow.open()を使用することができます。

this.myService.downloadPDF().subscribe(
     (res) => { 
     var fileURL = URL.createObjectURL(res); 
     window.open(fileURL); 
     } 
    ); 

Answer 2

角度v.5.2.1の答え：

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

そしてはサービスを呼び出す前に、新しいタブを開始し、開くことが、その後*.component.ts

downloadPDF() { 
    let tab = window.open(); 
    this._getPdfService 
     .downloadPDF() 
     .subscribe(data => { 
     const fileUrl = URL.createObjectURL(data); 
     tab.location.href = fileUrl; 
     }); 
    } 

におけるその重要。次に、このタブのurlをfileurlに設定します。