Emberjs 通过 axios 下载文件的方法
摘要:目前项目中需要与后端合作,通过发送 GET请求,后端返回文件流,前端进行文件的下载。
使用到的技术有:
- Emberjs
- axios
思路
接到这个需求的话,想着使用创建 a链接,然后模拟点击 a链接来完成下载,但是情况不是这样的。后端有多于一个的下载接口,首先是生成下载文件的接口,这个接口主要是返回需要下载的文件的 name以及相应的接口地址。而下载的文件可能不止一个,同时,对文件接口地址发送 GET请求,会返回文件流,但是我们需要的是 CSV格式的文件,所以想到通过 axios来实现这个需求。
具体做法
既然方向确定了,那就是去做了。
在项目中安装插件/导入 axios
现在 Emberjs封装好的 axios插件- ember-axios,使用 emberinstallaxios。这个插件没有文档,所以只能看源码,还好源码比较简单,就是简单的将 axios的一些方法封装成一个 service内的方法。
在项目文件中引入 axios
安装后在 Emberjs项目中将此 service引入近来
import{injectasservice}from'@ember/service'; exportdefaultController.extend({ //... axios:service() //... });
这样即可使用这个插件中封装的一些 axios的方法。
使用
之前也说过当前项目需要先发送一个请求,请求文件的接口地址。返回的值的格式为:
{ "fileNames":[ "filename=downloadFile1.csv", "filename=downloadFile2.csv" ], "status":"ok" }
可以看到,如我们所想的那样,返回的并不一定是单个文件的地址,所以我们在接收到这个数据后:
import{isEmpty}from'@ember/utils'; import{all,reject}from'rsvp'; //... .then(data=>{ if(data.status!=='ok'||isEmpty(data.fileNames)){ returnreject(); } returnall(data.fileNames.map(ele=>{ returnaxios.axios({ url:`${ele}`, method:'get', responseType:'blob' }); })); });
在等待上面的请求发送成功之后,我们看看这段代码的意思。最上面的两个 import是引入的一些 Emberjs中封装的一些通用方法以及 promies方法.在 then之内的代码,先是验证是否返回成功。然后对数据进行遍历,并发送 axios封装的 get请求。其中 axios.axios()是ember-axios封装的 axios.create(this.config())源码地址,同时注意的是 config对象中 responseType填写的是 blob,这是保证文件能够下载成功的基础。
请求发送成功之后,我们需要对返回的数据进行处理,也就是:
.then(data=>{ data.forEach((res,index)=>{ constcontent=res.data, blob=newBlob([content],{type:'text/csv'}), fileName=fileNames[index]; if('download'indocument.createElement('a')){//非IE下载 constelink=document.createElement('a'); elink.download=fileName; elink.style.display='none'; elink.href=URL.createObjectURL(blob); document.body.appendChild(elink); elink.click(); URL.revokeObjectURL(elink.href);//释放URL对象 document.body.removeChild(elink); }else{//IE10+下载 navigator.msSaveBlob(blob,fileName); } }); }).catch(()=>{ });
这段代码需要注意的是我们 newBlob()接收的是 res.data这个需要特别注意。另外就是此方法的第二个参数接收的 {type:'text/csv'},因为次项目下载的是 csv文件格式,其他的可以参考 MIME.其他的就是创建一个 display:none的 a标签,并触发点击事件。这时候浏览器就会进行下载。
总结
这算是在 Embjerjs中进行下载流文件的一次船新尝试。
以上所述是小编给大家介绍的Emberjs通过axios下载文件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!