如何使用 Flask 和 React 下载 excel 文件？

Question

我正在尝试下载 xlsx 文件。我发布一个 id 并使用它从数据库获取数据。然后我可以创建一个excel文件，但我无法下载它。

我的后端代码：

from flask import Flask
from flask import request, jsonify, make_response, json, send_file, redirect, url_for,send_from_directory
from bson.json_util import dumps
from flask_cors import CORS
import dbConnections.Test as db
import os

app = Flask(__name__)
cors = CORS(app, resources={r"/*": {"origins": "*"}}, support_credentials=True)


@app.route("/test-report", methods=["POST"])
def downloadTestReport():
    req = request.get_json();
    results = db.GetTestResult(req)
    return send_file('foo.xlsx', as_attachment=True)

if __name__ =="__main__":
    app.run(debug=True)

我的前端代码：

    let downloadReport = (e)=>{
        if(e.field ==="downloadReport"){
            const objId=  {testId: e.row.objId};
            
            axios.post('http://127.0.0.1:5000/test-report', objId)
            .then(function (response) { 
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });       
        }
    }

我的控制台上的结果：

我想下载返回的 Excel 文件。

Answer 1

为了在代码中显示 Ethan 的注释，假设您的后端 Flask 代码按应有的方式发送 Excel 文件，您的前端代码应如下所示：

                axios('/test-report', {
                    method: 'GET', //Pretty sure you want a GET method but otherwise POST methods can still return something too.
                    responseType: 'blob', // important
                }).then((response) => { //Creates an <a> tag hyperlink that links the excel sheet Blob object to a url for downloading.
                    const url = window.URL.createObjectURL(new Blob([response.data]));
                    const link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download', `${Date.now()}.xlsx`); //set the attribute of the <a> link tag to be downloadable when clicked and name the sheet based on the date and time right now.
                    document.body.appendChild(link);
                    link.click(); //programmatically click the link so the user doesn't have to
                    document.body.removeChild(link);
                    URL.revokeObjectURL(url); //important for optimization and preventing memory leak even though link element has already been removed. In the case of long running apps that haven't been reloaded many times.    
                });

这是参考：

//https://stackoverflow.com/questions/41938718 /how-to-download-files-using-axios?noredirect=1&lq=1

如何从apireact.js下载excel响应