0

I need to download a PDF from an API in Angular.

So, I've written a service to call the API:

 getPDF(id:any) {
    return this.http.get(
       `url?=${id}`,
        { responseType: 'blob' as 'json', observe: 'response' }
    );
 }

In my component file, I'm calling the service to download the PDF.

  onGeneratepdf() {
    this.service
  .getPDF(
    123
  )
  .subscribe((res: any) => {
    let filename = res.header
    ?.get('content-disposition')
    ?.split(';')[1]
    .split('=')[1];
  let blob: Blob = res.body as Blob;
  var a = document.createElement('a');
  a.download = filename;
  a.href = window.URL.createObjectURL(blob);
  a.click();
  });

}

after hitting onGeneratePDF , the pdf is downloading but the problem is ....it is downloading the file name as undefined.pdf...it should download as name like user.pdf and also i am getting the response headers as

access-control-allow-origin: *

cache-control: no-cache, no-store, max-age=0, must-revalidate

content-disposition: attachment; filename=user.pdf

content-type: application/pdf

Please help me on these issue.

Thanks in advance.

Township
  • 1
  • 2
  • Looks like `let filename = res.header?.get('content-disposition')?.split(';')[1].split('=')[1];` is returning `undefined`... You should try to debug your code in order to find the culprit. –  Jan 11 '23 at 10:34

1 Answers1

0
onGeneratepdf() {
        this.service
      .getPDF(
        123
      )
      .subscribe((res: any) => {
        let filename = res.headers
        ?.get('content-disposition')
        ?.split(';')[1]
        .split('=')[1];
      let blob: Blob = res.body as Blob;
      var a = document.createElement('a');
      a.download = filename;
      a.href = window.URL.createObjectURL(blob);
      a.click();
      });

Please try above code, you wrote res.header that should be res.headers

if above code not works for you, then take look at below link you will find your solution there Here.

Thanks!

Jay Patel
  • 251
  • 3
  • 9
  • After adding res.headers also, its throwing same issue.Thanks for ur time – Township Jan 11 '23 at 11:16
  • Can you add your service field code? this.service.getPDF(123) for this method? – Jay Patel Jan 11 '23 at 11:18
  • getPDF(id:any) { return this.http.get( `url?=${id}`, { responseType: 'blob' as 'json', observe: 'response' } ); } .. – Township Jan 11 '23 at 11:20
  • Put console.log() just above fileName variable and console res.headers, and paste here what you will get there. – Jay Patel Jan 11 '23 at 11:24
  • headers : - HttpHeaders {normalizedNames: Map(@), LazyUpdate: null, LazyInit: f} @ headers: Map(4) [[Entries}] 0: {"cache-control” => Array(1)} 1:{‘content-type" => Array(1)} 2:{expires” => Array(1)} 3: {"pragma" => Array(1)} size: 4 [[Prototype]]: Map lazyInit: null lazyUpdate: null normalizedNanes: Map(4) [[Entries]] 0:{‘cache-control” => "cache-control"} 1:{"content-type" => “content-type"} 2: {"expires" => “expires"} 3:{"pragma" => “pragna"} – Township Jan 11 '23 at 11:57
  • size: 4 [[Prototype]]: Map [[Prototype]]: Object ////////////////////////////// Filename:- undefined – Township Jan 11 '23 at 11:58
  • Just console.log(res.headers.get('content-disposition')) and console.log(res.header.get('content-disposition')). – Jay Patel Jan 11 '23 at 12:07
  • Headers : - null Header :- Cannot read properties of undefined (reading 'get') – Township Jan 11 '23 at 12:22