项目背景:前后端分离,前端采用React,后端采用Flask,压缩包存在于后端路径下
1、按钮设置点击事件,点击后调用handleFileExport方法
<Button
variant="contained"
color="primary"
onClick={handleFileExport}
fullWidth
>
导出文件
</Button>
2、handleFileExport方法
const handleFileExport = async () => {
// 模拟导出文件的过程
setTimeout(async () => {
const res = await fetch('http://127.0.0.1:5000/download/' + encodeURIComponent(filename), {
headers: {
'Accept': 'application/zip', // 设置适当的Accept头
},
});
const url = res.url;
// 创建一个虚拟的下载链接并触发点击事件
const a = document.createElement('a');
a.href = url;
a.style.display = 'none'; // 隐藏此超链接
document.body.appendChild(a);
a.click();
}, 3000); // 模拟3秒的导出时间
};
需要将http://127.0.0.1:5000/download/设置为自己的后端接口,filename为要导出的压缩包的名称,比如为demo.zip,注意一定要设置headers.
3、后端设置
from blueprints.dataApi.controllers import DataController
@bp.route('download/<filename>', methods=['GET'])
def download(filename):
try:
data = DataController._download(filename)
return data
except Exception as e:
return ArgumentExceptionResponse(msg=f'{e}')
点击按钮后,调用handleFileExport ,接下来会调用后端接口,继续调用DataController中的_download方法,_download方法如下:
4、_download方法:
from flask import send_file
@staticmethod
def _download():
folder_path = '../output/demo.zip'
return send_file(folder_path, as_attachment=True)
../output/demo.zip为压缩包,../output是压缩包相对于此_download方法所在文件(controllers.py)的相对路径,比如_download方法写在了controllers.py中,路径为blueprints/dataApi/controllers.py。