2017-06-29 102 views
0

在我的Angular應用程序中,當點擊一個按鈕時,我需要打開PDF。從Angular Component打開PDF blob

我也跟着擺在首位通過this後作出的指示,所以我有這兩種方法現在:

在調用組件

public PrepareDownload(){ 
    this._certificateService 
      .GetPdf(args) 
      .subscribe(
      result => { 
       this.BlobUri = URL.createObjectURL(result); 
      } 
} 

public Download() { 
    window.open(this.BlobUri);  
} 

在服務

public GetPdf() : any { 
    var headers = new Headers(); 
    headers.append("Content-Type", "application/json"); 
    var payload = {id:215}; 
    return this._http.post(this.requestUri, 
         JSON.stringify(payload), 
         { headers: headers, 
          responseType: ResponseContentType.Blob }) 
        .map((response: Response) => 
        { 
         return new Blob([response.blob()], { type: 'application/pdf' }); 
        }); 
} 

GetPdf的響應包含一個數組如下面的[ 37,80,68,70,45,49,46,...]。不幸的是,當下載方法被調用時,結果似乎是無效的pdf。當通過firefox下載文件並將其重命名爲txt文件時,我可以看到內容不是二進制文件,而是整個字節數組作爲字符串。

enter image description here

+0

我不認爲重新包裝blob是必要的,'(response:Response)=> response.blob()'通常適用於我。 –

+0

當不添加類型標題時,瀏覽器甚至不會嘗試用pdf查看器打開它。要添加這些標題,我重新包裝。 –

+1

那麼,確保服務器首先返回正確的Content-Type。 –

回答

0

如由@大衛賽絡的評論所指出的,服務必須被修改。 該請求現在返回一個流而不是一個字節數組,可以按照問題中的描述進行處理。