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 相关文章推荐
javascript 写类方式之二
Jul 05 Javascript
js 代码优化点滴记录
Feb 19 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
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
php下使用无限生命期Session的方法
2007/03/16 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
歌唱比赛主持词
2014/03/18 职场文书
爱之链教学反思
2014/04/30 职场文书
医院护士工作检讨书
2014/10/26 职场文书
公司备用金管理制度
2015/08/04 职场文书
vue实现拖拽交换位置
2022/04/07 Vue.js
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL
SQL语句多表联合查询的方法示例
2022/04/18 MySQL