CODEWITHSUNDEEP
angulartypescript
Sahil Agarwal
Sahil Agarwal

Reputation: 909

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

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 2content headers

Upvotes: 52

Views: 106046

Answers (9)

Nathan Smith
Nathan Smith

Reputation: 1813

Angular 12 with parsing of the file name.

const saveAsWithServerName = (response: HttpResponse<Blob>, defaultName = 'NoName.pdf') => {
  const fileName = response.headers
    .get('content-disposition')
    .split(';')
    .map(h => h.trim())
    .filter(h => h.startsWith('filename='))
    .reduce(h => h.length === 1 ? h[0] : defaultName)
    .replace('filename=', '');
  saveAs(response.body, fileName);
};

this.http.post(`./api/ReportPdf`, request, {observe: 'response', responseType: 'blob'}).subscribe({
    next: r => saveAsWithServerName(r)
});

Upvotes: 2

OMANSAK
OMANSAK

Reputation: 1332

CORS requests only expose 6 headers :

  • Cache-Control
  • Content-Language
  • Content-Type Expires
  • Last-Modified & Pragma.

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

Java : addExposedHeader https://docs.spring.io/spring-framework/docs/4.2.x/javadoc-api/org/springframework/web/cors/CorsConfiguration.html

.NET CORE : WithExposedHeaders https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-6.0

Express JS : exposedHeaders https://expressjs.com/en/resources/middleware/cors.html

Upvotes: 2

Partha Sarathi Ghosh
Partha Sarathi Ghosh

Reputation: 11576

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

Upvotes: 20

Sahil Ralkar
Sahil Ralkar

Reputation: 2404

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

Upvotes: 3

Ricardo Machado
Ricardo Machado

Reputation: 847

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

Upvotes: 11

Chandan Y S
Chandan Y S

Reputation: 1078

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

Upvotes: 35

Yehia Amer
Yehia Amer

Reputation: 638

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

Upvotes: 4

Nehal Damania
Nehal Damania

Reputation: 9018

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

Upvotes: 90

mslugx
mslugx

Reputation: 814

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

Upvotes: 59

Related Questions