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
Nov 25 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
vue-router路由模式详解(小结)
Aug 26 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
在线增减.htpasswd内的用户
2006/10/09 PHP
php笔记之:AOP的应用
2013/04/24 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
Django框架下在视图中使用模版的方法
2015/07/16 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python二进制文件的转译详解
2019/07/03 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
中专毕业个人的自荐信格式
2013/09/21 职场文书
美德好少年事迹材料
2014/01/19 职场文书
家长评语大全
2014/01/22 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
数控专业自荐书范文
2014/03/16 职场文书
学校体育节班级口号
2015/12/25 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
详解如何使用Nginx解决跨域问题
2022/05/06 Servers
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server