Unable to view 'Content-Disposition' headers in Angular4 GET response

问题

I am trying to download a pdf file in my Angular app. The server (JBoss) serves a file with

Content-type : application/pdf and Content- Disposition

header set to attachment. I can see these headers quite well in fiddler response. However in my subscribe callback I can't see the same headers. Instead the header contains two property namely: _headers and _normalizedHeaders

While making the GET call. I do:

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

    //Cant find headers in file here

});`

Also I tried setting responseType to RequestContentType.Blob and it made no difference either.

For my download implementation I have a piece of code that has always worked for me to download the attachment with AngularJS. I am only struggling here to read Content-Disposition header.

I also tried setting { observe : response }, expecting to get a detailed response that way. However, for some reasons setting that property is not allowed in GET options.

I have seen many answer on SO and tried most of them, but still not able to get the header.

P.S : Hitting the API directly on the browser gets me the file downloaded which means my Java code is fine and that makes me wonder what is wrong with my code above.

Requesting suggestions.

回答1:

With the help of Access-Control-Expose-Headers and setExposedHeaders suggested by Evans, I could achieve the file download as below.

In your Java code, you need to expose the Access-Control-Expose-Headers, which can be done using CORS as :

    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");

This will expose the required headers in the server response.

On your client, you can handle the response using the exact below code:

    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, I wrote everything at one place. You might want to modularize various callbacks.

Hope it helps someone someday.

回答2:

HI can you try like this

we need this package file-saver,you install like "npm install file-saver --save", then you can try

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' })
    })


  }

You need expose header of "Content- Disposition" from backed(JBoss server)

回答3:

For any custom header send by your server to be accessible in Angular (or any other web application) it has to be present in the Access-Control-Expose-Headers otherwise your browser will not pass it to your Angular App and you won't be able retrieve it even if your developer tools shows it present.

来源：https://stackoverflow.com/questions/45892875/unable-to-view-content-disposition-headers-in-angular4-get-response