React+Flask实现压缩包导出_前端react 接口导出zip文件

项目背景：前后端分离，前端采用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。