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 相关文章推荐
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
JavaScript 函数的执行过程
May 09 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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
Zerg建筑一览
2020/03/14 星际争霸
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
php 常用的系统函数
2017/02/07 PHP
javascript 打印页面代码
2009/03/24 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
删除节点的jquery代码
2014/01/13 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
python数据结构之二叉树的建立实例
2014/04/29 Python
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
详解python中list的使用
2019/03/15 Python
使用python制作一个解压缩软件
2019/11/13 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
华为慧通笔试题
2016/04/22 面试题
农民工工资承诺书范文
2014/03/31 职场文书
七一建党日演讲稿
2014/09/05 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
实习生矿工检讨书
2014/10/13 职场文书
补充协议书
2015/01/28 职场文书
销售经理工作检讨书
2015/02/19 职场文书
python基础详解之if循环语句
2021/04/24 Python