Flask - Get a dataframe to download as csv

Question

On a button click, I want to use values from from multiple input fields in html and use that as parameters to download some data. Then I am trying to convert that to csv and have it download as a csv file. I found in the javascript that the response has the data in csv format, but no file is getting downloaded. What am I missing?

.html file:

 ***html I left out to keep this short***

<input type="button" value="Download CSV"  onclick="downloadacsfile()">

.js file:

function downloadacsfile() {
    var acs_variable = document.getElementById('variableid').value;
    var state = document.getElementById('stateselection').value;
    var acs_type = document.getElementById('acs_type').value;
    var year = document.getElementById('years').value;

    $.get("/api/acs_download", {acs_variable: acs_variable, state:state, acs_type:acs_type, year:year }, function(response){
        console.log(response.exist);
    });
}

.py file:

app.add_url_rule('/api/acs_download', 'acs_download', acs_download,  methods=['GET'])

def acs_download():
    acs_variable = request.args['acs_variable']
    state = request.args["state"]
    acs_type = request.args["acs_type"]
    year = request.args["year"]

    params = {'acs_type': acs_type,
              'year': year,
              'variable': acs_variable,
              'state': state}

###Gets data from 3rd party API to csv format###
    datafetch = fetcher.Fetcher(api_key)
    data = datafetch.get_census_data(**params)
    data = data.to_csv(index=False)

    return Response(
        data,
        mimetype="text/csv",
        headers={"Content-disposition":
                     "attachment; filename=testfile.csv"})

Answer 1

You need the user to redirect to the location where the file is to be downloaded. So instead of making a get request, you instead turn window.location into the right url.

So turn this...

$.get("/api/acs_download", {acs_variable: acs_variable, state:state, acs_type:acs_type, year:year }, function(response){
  console.log(response.exist);
});

Into this:

var params = {acs_variable: acs_variable, state:state, acs_type:acs_type, year:year}
window.location.href = '/api/acs_download?' + $.param( params )