Ant Design Pro 下实现文件下载的实现代码
最近编写在页面内通过AJAX请求服务器下载文件遇到一些问题,网上找的资料和介绍大多不健全不系统,最终自己摸索出来的解决方案,先简单写个初稿,后面再详细补充。
表一:前端请求后端下载文件的各种情况
首先,需要在src/service/api.js里声明对应请求返回的文件类型:
importrequestfrom'@/utils/request'; exportasyncfunctionDownload(params={}){ returnrequest(`/api/download`,{ method:'POST',//GET/POST均可以 data:params, responseType:'blob',//必须注明返回二进制流 }); }
然后在对应的Model里编写相关请求处理的业务逻辑:
import{message}from'antd'; import{Download}from'@/services/api'; exportdefault{ namespace:'download', state:{}, effects:{ *download({payload,callback},{call}){ constresponse=yieldcall(Download,payload); if(responseinstanceofBlob){ if(callback&&typeofcallback==='function'){ callback(response); } }else{ message.warning('Someerrormessages...',5); } } }, reducers:{}, }
最后编写页面组件相关业务逻辑,点击下载按钮,派发下载action到model:
importReact,{Component}from'react'; import{Button}from'antd'; import{connect}from'dva'; @connect(({download,loading})=>({ download, loading:loading.effects['download/download'], })) classExampleDownloadPageextendsComponent{ handleDownloadClick=e=>{ e.preventDefault(); const{dispatch}=this.props; constfileName='demo.xlsx'; dispatch({ type:'download/download', payload:{},//根据实际情况填写参数 callback:blob=>{ if(window.navigator.msSaveOrOpenBlob){ navigator.msSaveBlob(blob,fileName); }else{ constlink=document.createElement('a'); constevt=document.createEvent('MouseEvents'); link.style.display='none'; link.href=window.URL.createObjectURL(blob); link.download=fileName; document.body.appendChild(link);//此写法兼容可火狐浏览器 evt.initEvent('click',false,false); link.dispatchEvent(evt); document.body.removeChild(link); } } }); } render(){ const{loading}=this.props; return; } }
大功告成!~~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。