flask后端+vue前端——后端怎么发文件给前端？

atregret2024-07-26 21:23

首先，前端axios请求的responseType要设置为blob

javascript 复制代码

const service = axios.create({
    baseURL: 'http://127.0.0.1/api',
    timeout: 5000
    });

 //向后端发送数据，后端根据这个数据data生成文件返回
 send_coordinate(data){
        return service.post('/',data,{responseType: 'blob'});
 }

然后，后端要返回文件字节流

javascript 复制代码

from flask import Flask,Response


@app.route('/', methods=['POST'])
def coordinate():
    res = request.form['data'] # 取前端数据

    # 保存为txt文件
    with open("1.txt", 'w', encoding='utf-8') as f:  
       f.write(data) 
    
    # 以字节方式读取
    with open(filename, 'rb') as f:
        bytes_data = f.read()
    
    # 用Response对象构造返回值，需要指定文件类型
    return Response(bytes_data, mimetype="text/plain")

接着，前端在axios的then中，把res.data转为Blob对象，然后创建URL，赋值给a标签的href属性

javascript 复制代码

user.send_coordinate(formData)
    .then(res=>{
                            
       let blob = new Blob([res.data], {type: 'text/plain'}); //这一步是关键
       this.downloadURL=URL.createObjectURL(blob) // 生成临时URL，赋值给变量
       this.filedownload=true // 标记变量，显示a标签（下载链接）
                           
     })

最后，a标签与vue变量如下

html 复制代码

<a v-if="filedownload" :href="downloadURL" download="coordinate.txt">下载轨迹文件</a>

javascript 复制代码

export default {
    name: 'PickTrack',
    data() {
        return {
            filedownload:false,   //是否有文件可下载
            downloadURL:''        //临时下载链接
        }
    },