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

后端

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