首先，前端axios请求的responseType要设置为blob
const service = axios.create({baseURL: 'http://127.0.0.1/api',timeout: 5000});//向后端发送数据，后端根据这个数据data生成文件返回send_coordinate(data){return service.post('/',data,{responseType: 'blob'});}
然后，后端要返回文件字节流
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属性
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变量如下
<a v-if="filedownload" :href="downloadURL" download="coordinate.txt">下载轨迹文件</a>
export default {name: 'PickTrack',data() {return {filedownload:false, //是否有文件可下载downloadURL:'' //临时下载链接}},
