無法在Angular4中查看'Content-Disposition'頭部GET回覆

我正嘗試在我的Angular應用中下載pdf文件。服務器（JBoss的）供應以無法在Angular4中查看'Content-Disposition'頭部GET回覆

Content-type : application/pdf and Content- Disposition

頭設置爲附件的文件。我可以在提琴手響應中很好地看到這些標題。但是，在我的訂閱回調中，我看不到相同的標題。相反，標題包含兩個屬性： _headers and _normalizedHeaders

進行GET調用時。我做的：

`this._http.get(url, {responseType: 'arraybuffer'}).subscribe((file: Response)=>{ 

    //Cant find headers in file here 

});`

我也試過的responseType設置爲RequestContentType.Blob，它要麼沒有區別。

對於我的下載實現，我有一段代碼一直工作給我下載附件與AngularJS。我只在這裏努力閱讀Content-Disposition標題。

我也嘗試設置{ observe : response }，期待以這種方式得到詳細的回覆。但是，由於某些原因，在GET options中不允許設置該屬性。

我見過很多關於SO的答案，並嘗試了其中的大部分，但仍無法獲得標題。

P.S：直接在瀏覽器上打開API會讓我下載文件，這意味着我的Java代碼很好，這讓我想知道我的代碼上面有什麼問題。

請求建議。

來源

2017-08-26 Saurabh Tiwari

在Evans建議的Access-Control-Expose-Headers和setExposedHeaders的幫助下，我可以實現文件下載如下。

在Java代碼中，你需要暴露Access-Control-Expose-Headers，可以使用CORS完成此操作：

CorsFilter corsFilter = new CorsFilter(); 
    corsFilter.setAllowedHeaders("Content-Type, Access-Control-Allow-Headers, Access-Control-Expose-Headers, Content-Disposition, 
    Authorization, X-Requested-With"); 
    corsFilter.setExposedHeaders("Content-Disposition");

這將會使服務器響應所需的頭。

在你的客戶，你可以處理使用下面的代碼的確切迴應：

private processDownloadFile() { 
       const fileUrl = this._downloadUrl; 
       this.http.get(fileUrl, ResponseContentType.ArrayBuffer).subscribe((data: any) => { 
       const blob = new Blob([data._body], { type: data.headers.get('Content-Type')}); 
       const contentDispositionHeader = data.headers.get('Content-Disposition'); 
       if (contentDispositionHeader !== null) { 
        const contentDispositionHeaderResult = contentDispositionHeader.split(';')[1].trim().split('=')[1]; 
        const contentDispositionFileName = contentDispositionHeaderResult.replace(/"/g, ''); 
        const downloadlink = document.createElement('a'); 
        downloadlink.href = window.URL.createObjectURL(blob); 
        downloadlink.download = contentDispositionFileName; 
        if (window.navigator.msSaveOrOpenBlob) { 
         window.navigator.msSaveBlob(blob, contentDispositionFileName); 
        } else { 
         downloadlink.click(); 
        } 
       } 
       }); 
    }

Ofcourse，我在一個地方寫的一切。您可能想要模塊化各種回調。

希望有一天能幫助別人。

來源

2017-08-28 13:35:52

HI可以嘗試這樣

我們需要這個包的文件保護程序，安裝像「NPM安裝文件金丹--save」，那麼你可以嘗試

public downloadCSVFile(){ 
this.downloadPdf().subscribe(
    (res) => {  
     saveAs(res,'test.pdf') 
    } 
); 
} 

public downloadPdf(): any { 
    let url='your url' 
    let headers = new Headers(); 
    headers.append('Authorization', 'JWT ' + localStorage.getItem('id_token')); 
    return this.http.get(url,{ headers: headers,responseType: ResponseContentType.Blob }).map(
    (res) => { 
     return new Blob([res.blob()], { type: 'application/pdf' }) 
    }) 


    }

你需要暴露從備份（JBoss服務器）的「內容 - 處置」頭

來源

2017-08-26 07:23:01 Robert

謝謝@羅伯特，雖然我不是在尋找一個外部模塊來實現它。我發佈了幫助我的案例的代碼。 –

好超級@SaurabhTiwari – Robert

有關您的服務器發送任何自定義標題是在角（或任何其他Web應用程序）訪問它必須存在於Access-Control-Expose-Headers否則你瀏覽器不會將它傳遞給您的Angular App，即使您的開發人員工具顯示它，您也無法檢索它。

來源

2017-08-26 23:13:35

我正在做這個在Java中，我有以下頭設置爲我的CORS的一部分： corsFilter.setAllowedHeaders（「Content-Type，Access-Control-Allow-Headers，Access-Control-Expose-標題，內容處理，內容長度，授權，X請求 - 與「）;'是否有任何其他方式，你建議。 –

如果仔細查看代碼，您會注意到您只設置了「Access-Control-Allow-Headers」，並且包含「Access-Control-Expose-Headers」作爲允許的標題的一部分。我不知道這是如何在Java中完成的，但我認爲你應該也有類似'corsFilter.setExposedHeaders（「custom header，customer，header」） –

我添加了'corsFilter.setExposedHeaders（「Content-Disposition，Content-Type」）;'到我現有的代碼。這可以下載文件。然而，令人驚訝的是，如果你點擊下載的文件，它只是給出一個彈出窗口說：「加載PDF文檔失敗。」這是否很熟悉？ –

無法在Angular4中查看'Content-Disposition'頭部GET回覆

回答

相關問題