Emberjs 通过 axios 下载文件的方法


Posted in Javascript onSeptember 03, 2019

摘要: 目前项目中需要与后端合作,通过发送 GET 请求,后端返回文件流,前端进行文件的下载。

使用到的技术有:

  1. Emberjs
  2. axios

思路

接到这个需求的话,想着使用创建 a 链接,然后模拟点击 a 链接来完成下载,但是情况不是这样的。后端有多于一个的下载接口,首先是生成下载文件的接口, 这个接口主要是返回 需要下载的文件的 name 以及相应的接口地址。而下载的文件可能不止一个,同时,对文件接口地址发送 GET 请求,会返回文件流,但是我们需要的是 CSV 格式的文件,所以想到通过 axios 来实现这个需求。

具体做法

既然方向确定了,那就是去做了。

在项目中安装插件/导入 axios

现在 Emberjs 封装好的 axios 插件 - ember-axios ,使用 ember install axios 。这个插件没有文档,所以只能看源码,还好源码比较简单,就是简单的将 axios 的一些方法封装成一个 service 内的方法。

在项目文件中引入 axios

安装后在 Emberjs 项目中将此 service 引入近来

import { inject as service } from '@ember/service';

export default Controller.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)) {
  return reject();
 }
 return all(data.fileNames.map(ele => {
  return axios.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) => {
  const content = res.data,
   blob = new Blob([content], { type: 'text/csv' }),
   fileName = fileNames[index];

  if ('download' in document.createElement('a')) { // 非IE下载
   const elink = 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(() => {
});

这段代码需要注意的是我们 new Blob() 接收的是 res.data 这个需要特别注意。另外就是此方法的第二个参数接收的 {type: 'text/csv'} ,因为次项目下载的是 csv 文件格式,其他的可以参考 MIME . 其他的就是创建一个 display:none 的 a 标签,并触发点击事件。这时候浏览器就会进行下载。

总结

这算是在 Embjerjs 中进行下载流文件的一次船新尝试。

以上所述是小编给大家介绍的Emberjs 通过 axios 下载文件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
原生js实现自定义滚动条
Jan 20 Javascript
vue 自动化路由实现代码
Sep 03 #Javascript
vue中npm包全局安装和局部安装过程
Sep 03 #Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 #jQuery
Webpack中loader打包各种文件的方法实例
Sep 03 #Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 #Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 #jQuery
js tab栏切换代码实例解析
Sep 03 #Javascript
You might like
openPNE常用方法分享
2011/11/29 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php验证码实现代码(3种)
2015/09/07 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
Js 刷新框架页的代码
2010/04/13 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
Vue实现简单分页器
2018/12/29 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
Python深入学习之对象的属性
2014/08/31 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python中redis的安装和使用
2016/12/04 Python
python学生信息管理系统(完整版)
2020/04/05 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
五年级学生评语
2014/04/22 职场文书
物理学专业自荐信
2014/06/11 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
品质保证书格式
2015/02/28 职场文书