【Vue-element-admin】vue前端处理Blob文件流，实现文件下载

最新推荐文章于 2025-05-22 17:21:15 发布

月月吃喝

最新推荐文章于 2025-05-22 17:21:15 发布

阅读量686

点赞数 2

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_43840640/article/details/134951555

Vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了后端使用BaseView类处理文件下载请求，以及前端如何处理后端返回的二进制流和设置下载文件名的过程。重点在于处理请求类型和创建下载链接的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后端

class DownLoadResource(BaseView):
  def post(self):
    file_url=self.request.form.get('file_url')
    file_name=file_url.split('/')[-1]
    download_url=config.LOCAL_UPLOAD_PATH=file_name
    return send_file(download_url,as_attachment=True)

前端

request.js

因为后端返回的是二进制流，也没有返回状态码，所以会被拦截，需要在request.js文件对返回的状态码进行处理

if(response.request.responseType ===  'blob' || response.request.responseType ===  'arraybuffer'){
      return response.data
 }

downloadFile.vue

<template>
  <div>
    <button @click="handleDownload()">下载文件</button>
  </div>
</template>
<script>
import DownloadResource} from '@/api/upload-file-data'

export default{
  methods:{
     handleDownload(){
       let format=new FormData()
       formData.append('file_url','http://..../xx.pdf')
       DownloadResource(formData).then(response=>{
          const objectUrl=window.URL.createObjectUrl(new Blob([response],{type:"application/pdf"}))
	      // 创建URL
	      const link = document.createElement('a');
	      link.href=objectUrl;
	      //获取后台传过来的文件名
	      link.setAttribute('download','test');
	      //将链接元素添加到DOM中
	      document.body.appendChild(link);
	      //下载文件
	      link.click();
	      //清理并释放链接元素
	      link.parentNode.removeChild(link);
       })    
     }
  }  
}
</script>

upload-file-data.js

export function DownloadResource(data){
  return request({
    url:''
    method:'post'
    reponseType:'blob',
    data
  })
}