how to download file using api angular

I have an API that downloads a file, I have a button on the button I have a click that sends a request to the API for download a file, but it doesn’t work request sending successfully but the file is not downloaded, but when I’m adding the URL into the browser the file is successfully downloaded

HTML

<button (click)="exportFile()">Download</button>

JavaScript
​x
 
<button (click)="exportFile()">Download</button>
​

  exportFile(): void{
this.companiesService.export().subscribe((res) => {
  console.log(res);
});
}

JavaScript
 
  exportFile(): void{
this.companiesService.export().subscribe((res) => {
  console.log(res);
});
}
​

Service

  export(){
    const headers = this.httpOptions.headers.set('Authorization', `Bearer ${this.cookieService.get('access-token')}`);
    return this.http.get(`${this.API_URL}/company/export/`,{headers});
  }

JavaScript
 
  export(){
    const headers = this.httpOptions.headers.set('Authorization', `Bearer ${this.cookieService.get('access-token')}`);
    return this.http.get(`${this.API_URL}/company/export/`,{headers});
  }
​

Answer

You need to process the returned blob and save it as a file. Just returning it is not enough. Perhaps this demo can give you more insight how to improve your service. https://stackblitz.com/edit/angular-file-download-progress-qsqsnf?file=src%2Fapp%2Fdownload.ts

Advertisement

Answer