how to read content-disposition headers from server response angular 2

Question

I am unable to find, how to read filename from content disposition in angular 2 documentation. Can someone guide read the headers from server in angular 2 content headers<\/a>

"

Answer 1

With new Angular Http, one can try the following in the Service code.

  downloadLink(): Observable<HttpResponse<Blob>> {
    return this.http.get<Blob>(this.someURL, {
      observe: 'response',
      responseType: 'blob' as 'json'
    });
  }

And use the above as

 this.someService
  .downloadLink()
  .subscribe(
    (resp: HttpResponse<Blob>) => {
      console.log(resp.headers.get('content-disposition'));
      data = resp.body
    });

Also, on the server side, one needs to set the following header in response. 'Access-Control-Expose-Headers': 'Content-Disposition'

Like in Java Spring Boot one can do the same using

    final HttpHeaders headers = new HttpHeaders();
    headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=1.xlsx");
    headers.add(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS, HttpHeaders.CONTENT_DISPOSITION);

Answer 2

To those complaining that the best solution is not working, and only content-type is in the headers, you need to set 'Access-Control-Expose-Headers': 'Content-Disposition' ON SERVER SIDE. I am using asp.net core, then I have to do the following.

app.UseCors(builder =>
                builder.WithOrigins(originsAllowed.ToArray())
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .WithExposedHeaders("Content-Disposition")

Answer 3

You can try this kind of code here.

Note: Do not use map

this.http.post(URL, DATA)
  .subscribe((res) => {
     var headers = res.headers;
     console.log(headers); //<--- Check log for content disposition
     var contentDisposition= headers.get('content-disposition');
});

Answer 4

In angular, we can read File Name like as show below,

  this.http.post(URL, DATA).subscribe(
        (res) => {
            var contentDisposition = res.headers.get('content-disposition');
            var filename = contentDisposition.split(';')[1].split('filename')[1].split('=')[1].trim();
            console.log(filename);
        });

But the main thing is that we need to specify Access-Control-Expose-Header in API as shown below,

Note: The last line is mandatory

FileInfo file = new FileInfo(FILEPATH);

HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
{
    FileName = file.Name
};
response.Content.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");

Answer 5

With Angular 9 and Expresss

Need to Allow this header in Express

res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition');

Angular

this.http.get(url, { observe: 'response', responseType: 'blob' as 'json' })
.subscribe((res: any) => {
    console.log(res.headers.get('content-disposition'));
});

Answer 6

In Angular 7 the up-voted method don't work, you need to do it like this :

const responseHeaderFilename = response.headers.get('content-disposition');

Please find Angular official docs for more details: https://angular.io/guide/http#reading-the-full-response

and also make sure that the "Content-Disposition" is exposed as in @mslugx answer

Answer 7

To get the filename from response header.

(data)=>{  //the 'data' is response of file data with responseType: ResponseContentType.Blob.
    let filename = data.headers.get('content-disposition').split(';')[1].split('=')[1].replace(/\"/g, '')
}

Answer 8

(file gets saved in binary format in the browser. the filename is in client's Network/header/Content-Disposition, we need to fetch the filename)

In Server-side code:
node js code-
    response.setHeader('Access-Control-Expose-Headers','Content-Disposition');
    response.download(outputpath,fileName);   

In client-side code:
1)appComponent.ts file
import { HttpHeaders } from '@angular/common/http';
this.reportscomponentservice.getReportsDownload(this.myArr).subscribe((event: any) => {
 var contentDispositionData= event.headers.get('content-disposition');
 let filename = contentDispositionData.split(";")[1].split("=")[1].split('"')[1].trim()
 saveAs(event.body, filename); 
});

2) service.ts file
import { HttpClient, HttpResponse } from '@angular/common/http';
getReportsDownload(myArr): Observable<HttpResponse<Blob>> {
 console.log('Service Page', myArr);
 return this.http.post(PowerSimEndPoints.GET_DOWNLOAD_DATA.PROD, myArr, {
  observe: 'response',
  responseType: 'blob'
 });
}

Answer 9

CORS requests only expose 6 headers :

• <\/li>
• <\/li>
• <\/li>
• <\/li><\/ul>

  In order to access custom headers with a CORS request, the server has to explicitly whitelist them. This can be done by sending the response header: Access-Control-Expose-Headers<\/strong>