無法在Angular4 GET響應中查看“Content-Disposition”標頭

Question

我想在我的Angular應用程序中下載pdf文件。 服務器（JBoss）提供文件

Content-type : application/pdf and Content- Disposition

標頭設置為附件。 在fiddler響應中我可以很好地看到這些標題。 但是在我的訂閱回調中，我看不到相同的標題。 相反，標題包含兩個屬性，即： _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的答案並嘗試了大部分，但仍然無法得到標題。

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

請求建議。

Answer 1

在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();
                    }
                }
              });
    }   

當然，我在一個地方寫了一切。 您可能希望模塊化各種回調。

希望有一天能幫助某人。

Answer 2

你可以嘗試這樣嗎

我們需要這個包文件保護程序，你安裝像“npm install file-saver --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服務器）公開“Content- Disposition”標題

Answer 3

對於您的服務器發送的可在Angular（或任何其他Web應用程序）中訪問的任何自定義標頭，它必須存在於Access-Control-Expose-Headers否則您的瀏覽器不會將其傳遞給您的Angular應用程序而您不會即使您的開發人員工具顯示它，也能夠檢索它。