Return a CSV File from Flask to Angular Client

Question

I have an app which runs an Angular Frontend and Flask Backend. I have created a button that trigger a API call to Flask that queries my database and returns a dataframe (df) in a CSV format.

I believe I have coded the Flask part correctly as I can't see any errors in the logs. However, I do get an error appearing on the client side which is:

SyntaxError: Unexpected token '', ""... is not valid JSON

I suspect its because my subscribing of the data is done incorrect, but I am unsure of what needs to happen

Angular (When the Download Button is clicked, this is triggered)

      fullDownload() {
        let responseData: any;
        const date = this.selectedDate;
        const id= this.selectedId;
        this.seriveFile.getFullData(date, id).subscribe(
              data => {
                responseData = new Blob([data], {type: 'text/csv'})
                const url = window.URL.createObjectURL(responseData);
                window.open(url);

                 },
              error => {this.errorMessage = error.error.error;
                         }
              );
      }

Angular (The service it calls)

  public getFullData(value, id) {
    let params = new HttpParams();
    params = params.append('date', value);
    params = params.append('id', id);
    return this.http.get<any>(`${this.baseAPIURL}/api/example/download-data`, {params, responseType:"blob" as "json"});
  }

Flask

resp = make_response(df.to_csv(index=False))
resp.headers["Content-Disposition"] = "attachment; filename=export.csv"
resp.headers["Content-Type"] = "text/csv"
return resp

try adding `responseType: 'blob'`, see: https://stackoverflow.com/a/58828051/4321299 — traynor, Oct 28 '22 at 11:34
Thanks for the suggestion. I made the adustment to the service call and a csv does download however, the file is empty with just one cell populated as "ï»¿" any ideas why. I have updated my original post — LearnerCode, Oct 28 '22 at 12:23
Since what you are producing in Flask is text, I'm guessing that you want the responseType to be `text` instead of `blob`. Also, instead of `get` you probably want `get` — GreyBeardedGeek, Oct 28 '22 at 12:38
did you try `new Blob([data], { type: 'text/csv' })`, check the accepted answer in the link — traynor, Oct 29 '22 at 20:05
Now I get no response. Nothing on the Console/Terminal on npm or flask. I have updated the original post accordingly — LearnerCode, Oct 31 '22 at 10:50

score 0 · Answer 1 · answered Oct 31 '22 at 19:47

This should download the file:

fullDownload() {
    let responseData: any;
    const date = this.selectedDate;
    const id = this.selectedId;
    this.seriveFile.getFullData(date, id).subscribe(
        data => {

            const filename = 'csv.csv';

            const a = document.createElement('a');
            a.href = window.URL.createObjectURL(data);
            a.download = filename;
            a.click();

        },
        error => {
            this.errorMessage = error.error.error;
        }
    );
}

Return a CSV File from Flask to Angular Client

1 Answers1