Download a file generated in the backend by Angular2+

Question

Hello, I’m having trouble downloading a file generated by backend in my angular project, I have the following method

generateXlsx(obj) {
let headers = new Headers();
let token = localStorage.getItem('token');
let client = localStorage.getItem('client');
let uid = localStorage.getItem('uid');
headers.append('access-token', token);
headers.append('client', client);
headers.append('uid', uid);
return this.http.get(this.xlsxUrl, { params: obj, headers: headers });
}

When it is called it goes to Download url of my file, but when I call this Route/Url via angular, it does not download, but in the Network tab the file is saved in Answer, follow print of the result

In my Frontend, when I press a button and call the following method

generatePlanilha(obj) {
this.api.generateXlsx(obj)
  .subscribe(response => {
    if (response) {
      console.log("Planilha Gerada");
    }
  },
    (error => { console.log("NAO GEROU PLANILJA") }));
  }

I was wondering how I do to download the answer that is on the Network

Answer 1

You can create a blob from Response and download it by opening a popup with the data:

 import 'rxjs/add/operator/map';

 .map((res:Response) => res.text())
 .subscribe(response => {
    if (response) {
      const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      const url= window.URL.createObjectURL(blob);
      window.open(url);
    }
  },
    (error => { console.log("NAO GEROU PLANILJA") }));
  }

https://developer.mozilla.org/en-US/docs/Web/API/Blob

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

https://stackoverflow.com/questions/2937465/what-is-correct-content-type-for-excel-files