I'm getting a pdf in my Api Response, but angular is not able to download it , because subscribe is not able to grab a response on type pdf

Question

In backend I'm using FW1(Coldfusion FrameWork).

First code is of angular Ts file.

 showPdf(){

   let ReportPdf = new FormData();
   ReportPdf.append('DateFrom',(<HTMLInputElement>document.getElementById("dateFrom")).value);
   ReportPdf.append('DateTo',(<HTMLInputElement>document.getElementById("dateTo")).value);
   ReportPdf.append('VendorId',this.labourReport.get('vendorName').value);
   ReportPdf.append('ProjectID',this.labourReport.get('projectName').value);


   this.hrservice.getLabourPdf(ReportPdf).subscribe(blob => {
     console.log("--",blob);
    importedSaveAs(blob, this.fileName);
   }
  )
  }

2nd Code is of Angular Service File

  public getLabourPdf(obj:any):Observable<any>{

   return this.http.post(this.apiurl + 'report.reportpdf&reload=1' ,obj)
 .pipe(
  map((res: any) => {
    return new Blob([res.blob()], { type: 'application/pdf' });
  })

);

}

Last Code is of Fw1 Controller

 function reportpdf(struct rc,struct headers){  
        
    var arguments.rc.response = StructNew();
    arguments.rc.response.success = '';

    local.response =  variables.reportService.Data(VendorId=request.rc.VendorId ,projectId=request.rc.ProjectID,dateFrom = DateFormat(request.rc.DateFrom,"YYYY-MM-DD"),dateTo = DateFormat(request.rc.DateTo,"YYYY-MM-DD"));
     rc.title = "labourReport";
    arguments.rc.response.success = local.response;

    variables.fw.setView("main.reportpdf");

}

This is What I'm getting in Api Response

   %PDF-1.4
   %����
   2 0 obj
   <</Filter/FlateDecode/Length 338>>stream
   x���MO�@���+樗u��*WcM4jl��1
   ԒZD����t�4K�Lvx���N����:�Ф050�PB���
   ^�f��-̟)��j�pRwպ��"Tؚ�]�����4O���.2I�ük� �D�9��Nȩɛ�d�[�!��| 
   �cV�e��0ϔl�

score 0 · Answer 1 · answered Jun 26 '22 at 20:09

You have to specify the response type and what you accept from your HTTP request. In this case your HTTP request should look like:

public getLabourPdf(obj:any):Observable<any>{
   let headers = new HttpHeaders();
   headers = headers.set('Accept', 'application/pdf');
   return this.http.post(this.apiurl + 'report.reportpdf&reload=1',
                         obj, 
                         { headers: headers, responseType: 'blob' })
      .pipe(
         map((res: any) => {
            return new Blob([res.blob()], { type: 'application/pdf' });
         })
      )
}

Above Code is also Not working – Asif ansari Jun 28 '22 at 09:21 — Asif ansari, Jun 28 '22 at 09:21

score 0 · Answer 2 · answered Apr 07 '23 at 14:13

I have tried using File Saver. You need to download and import this in the required .ts file as mentioned below.

import * as FileSaver from 'file-saver';

Then I have created a generic function below. Once the api will succeed , you will get prompted in the browser for Pdf download.

downloadFile(apiName, name) { //apiname, required downloaded file name
this.appService
  .GETtext(apiName) //api call for getting download file
  .subscribe((response) => {
    var mediaType = 'application/pdf'; //media type for blob creation
    var blob = new Blob([response], { type: mediaType });

    //it will convert the data to pdf and gets directly downloaded
    FileSaver.saveAs(blob, name); 
  });
}

In the above function the getText(url) function used is written below

GETtext(url: string): Observable<any> {
  let headers = new HttpHeaders();
  headers = headers.set('Accept', 'application/pdf');
  return this.httpClient.get(this.url + url, {
    headers: headers,
    responseType: 'blob',
 });
}

I'm getting a pdf in my Api Response, but angular is not able to download it , because subscribe is not able to grab a response on type pdf

2 Answers2