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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 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
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
php提交post数组参数实例分析
2015/12/17 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
python并发编程之线程实例解析
2017/12/27 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
Linux的文件类型
2012/03/07 面试题
如何安装ruby on rails
2014/02/09 面试题
标准自荐信范文
2014/01/29 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
三好学生竞选稿
2015/11/21 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书