使用 Flask 和 JS 从服务器下载文件

Question

我正在尝试在用户单击特定按钮时下载文件。该文件是按下所述按钮时创建的图像。我想要的是，它应该自动将图像下载到客户端设备上。

我在服务器代码上使用 Flask，理想情况下，Flask 的 send_file 函数应该触发此自动下载，因为它添加了 Content-Disposition header。

在客户端，我有一个 JS 代码使用 fetch API 向服务器发送一个带有一些数据的 POST 请求，用于生成图像下载。

这是JS代码：

function make_image(text){
    const json={
        text: text
    };
    const options={
        method: "POST",
        body: JSON.stringify(json),
        headers:{
            'Content-Type':'application/json',
        }
    };

    fetch('/image',options)
        .then(res=>{
            res.json(); //Gives an error: Uncaught (in promise) SyntaxError: Unexpected token � in JSON at position 0
        }).catch(err=>console.log(err));
}

这是服务器上的 Python 代码：

@app.route('/image',methods=['POST'])
def generate_image():
    cont = request.get_json()
    t=cont['text']
    print(cont['text'])
    name = pic.create_image(t)
    time.sleep(2)
    return send_file(f"{name}.png",as_attachment=True,mimetype="image/png")

但什么也没有发生。图片没有下载。然而，图像正在服务器上创建并且没有损坏

我该如何解决这个问题？还有其他方法可以做我想做的事吗？

Answer 1

您可以执行以下操作

return send_from_directory(dir, file_name, as_attachment=True)

这会将文件下载到用户的计算机上。

编辑：

顺便说一句，如果您创建如下所示的 html 表单，则不需要 javascript.

<form action='action here' method='post'>
    <input type='submit'>
</form>

Answer 2

由于@clockwatcher 提到了一个不同的，我使用 download.js 模块来处理图像的下载。

所以我的 JS 代码现在看起来像这样：

function make_image(text){
    const json={
        text: text
    };
    const options={
        method: "POST",
        body: JSON.stringify(json),
        headers:{
            'Content-Type':'application/json',
        }
    };

    fetch('/image',options)
        .then(res=>{
            return res.blob();
        }).then(blob=>{
            download(blob)
        }).catch(err=>console.log(err));
}

并在 html 的脚本标签中添加：

<script src="https://cdnjs.cloudflare.com/ajax/libs/downloadjs/1.4.8/download.min.js"></script>

Python 服务器代码没有变化。

现在有效

使用 Flask 和 JS 从服务器下载文件

Download file from server with Flask and JS

javascript

httprequest

flask

python-3.x

fetch-api