Javascript

vue flask文件下载,两步搞定

本文主要是介绍vue flask文件下载,两步搞定,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

    今天给大家说一说vue flask文件下载的方法,具体如下:

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()

})

    好啦,以上便是关于vue flask文件下载,两步搞定的全部内容,更多内容可关注慕课网其他文章~

这篇关于vue flask文件下载,两步搞定的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!