vue+flask实现文件的下载

zr小杰

已于 2022-02-28 21:01:51 修改

阅读量2k

点赞数

分类专栏：前端文章标签： flask 前端 vue.js

于 2022-02-28 21:01:04 首次发布

本文链接：https://blog.csdn.net/qq_44854875/article/details/123191785

版权

前端专栏收录该内容

3 篇文章

订阅专栏

1、首先定义后端flask接口，将文件转换为二进制流

@app.route('/download', methods=['GET'])
def download():
    file = open("./upload/test.zip", "rb").read()
    response = make_response(file)
    return response

2、前端发送请求获取数据

（1）首先可以直接通过a标签发送请求如下，服务器运行在本地5000端口

<a href="http://localhost:5000/download">下载数据</a>

（2）也可以通过fetch和axios发送请求

fetch：因为fetch包裹了两层promise，第一层获取响应同时调用其blob方法将数据转为blob，第二层接收blob，并创建a标签实现下载

fetch('http://localhost:5000/download', {
  method: 'GET'
})
  .then((res) => {
    return res.blob()
  })
  .then(data => {
    const blobUrl = window.URL.createObjectURL(data)
    const a = document.createElement('a')
    a.style.display = 'none'
    a.download = 'test.zip'
    a.href = blobUrl
    a.click()
  })

axios由于vue项目用axios更多，也可以使用axios，注意get请求的config是第二个参数进行配置的，而post是第三个；并且这里需要配置responseType为blob

this.$https.get('/download', {
  responseType: 'blob'
}).then((res) => {
  const blobUrl = window.URL.createObjectURL(res.data)
  const a = document.createElement('a')
  a.style.display = 'none'
  a.download = 'test.zip'
  a.href = blobUrl
  a.click()
})