Download file with Vue.js and Python Flask

My Flask is a REST server.

On my flask route this is what I have:

@app.route('/v1/download', methods=['POST'])
def download_tissue():
    f = open('path_to_zip_file', 'rb') // or r for text file
    return f.read()

(Previously I was using Flask's send_file(). But I'm not sure what send_file does that I can't do with just reading it, and I'm trying to simplify the case to figure out the problem.)

On the client I have a Vue application making an async request:

axios.post('download')
.then((res) => {
    let data = res.data;
    const blob = new Blob([data], { type: 'application/zip' })
    let link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = 'test.zip'
    link.click()
})
.catch(error => {
    console.error(error);
});

The problem is I can't unzip it on a Mac. Unable to expand test.zip in to Download. (Error 1 - Operation not permitted.) Also the file size is just wrong. It's nearly 22 mb instead of the original 12.

If I open plain text file it works, but not the zip file.

1 answer

  • answered 2019-10-08 03:10 rabbit.aaron

    I'm guessing you opened the file in byte mode, but when it's returned in the view function, Flask tries to decode it to a string, then encode back to bytes. That's why you get a bigger file.

    try returning

    flask.send_file("path/to/file.zip", mimetype="application/zip", as_attachment=True, attachment_filename="filenamefordownload.zip")