[Fixed] Sending get request to download file generated on the server side

Issue

I am learning the mean stack and I have a file I generate on the server-side of my application I intend to download this file from my angular front end when a button is clicked.
but when I click the button nothing happens, I check my back end the file is generated successfully and everything works fine.
when I access the ‘localhost:port/generate-file’ from my browser the file gets generated and downloaded successfully so I am thinking I have some issue on the angular part.

Here is the code I used :

ts

  downloadFile(): any {
    return this.http
      .get('http://localhost:4000/generated-file', { responseType: 'blob' })
      .subscribe();
  }

Markup

  <button class="button" (click)="downloadFile()">

Thank you in advance.

Solution

If your API is working fine (if it is returning the file as blob), you can download it using file-saver.js.

this.http.get('http://localhost:4000/generated-file', {
    responseType: 'blob'
}).subscribe(
    response => {
        saveAs(response, 'filename')
    }
);

See this link for a simple example.