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

admin管理员组

文章数量:1253966

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.

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.

• javascript
• angular
• browser
• download
• http-headers

Share Improve this question Follow edited Aug 26, 2017 at 7:16 Rahul Singh 19.6k1313 gold badges6868 silver badges9494 bronze badges asked Aug 26, 2017 at 7:12 Saurabh TiwariSaurabh Tiwari 5,1111111 gold badges5050 silver badges9090 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 19

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.

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.

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)

本文标签： javascriptUnable to view 39ContentDisposition39 headers in Angular4 GET responseStack Overflow