Emberjs 通过 axios 下载文件的方法

摘要： 目前项目中需要与后端合作，通过发送 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 下载文件的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue element中axios下载文件（后端Python）

    •axios 接受文件流,需要设置 {responseType:'arraybuffer'} axios.post( apiUrl, formdata, {responseType:'arraybuffer'} ).then(res=> { if (res.status === 200) { let blob = new Blob([res.data], { type: res.headers['content-type'] }); const fileName = res.headers['c

  • Emberjs 通过 axios 下载文件的方法

    摘要: 目前项目中需要与后端合作,通过发送 GET 请求,后端返回文件流,前端进行文件的下载. 使用到的技术有: Emberjs axios 思路 接到这个需求的话,想着使用创建 a 链接,然后模拟点击 a 链接来完成下载,但是情况不是这样的.后端有多于一个的下载接口,首先是生成下载文件的接口, 这个接口主要是返回 需要下载的文件的 name 以及相应的接口地址.而下载的文件可能不止一个,同时,对文件接口地址发送 GET 请求,会返回文件流,但是我们需要的是 CSV 格式的文件,所以想到通过 a

  • PHP实现打包下载文件的方法示例

    本文实例讲述了PHP实现打包下载文件的方法.分享给大家供大家参考,具体如下: /** * 下载文件 * @param $img * @return string */ public function Download($img) { $items = []; $names = []; if($img) { //用于前端跳转zip链接拼接 $path_redirect = '/zip/'.date('Ymd'); //临时文件存储地址 $path = '/tmp'.$path_redirect;

  • python实现支持目录FTP上传下载文件的方法

    本文实例讲述了python实现支持目录FTP上传下载文件的方法.分享给大家供大家参考.具体如下: 该程序支持ftp上传下载文件和目录.适用于windows和linux平台. #!/usr/bin/env python # -*- coding: utf-8 -*- import ftplib import os import sys class FTPSync(object): conn = ftplib.FTP() def __init__(self,host,port=21): self.c

  • python实现从ftp服务器下载文件的方法

    本文实例讲述了python实现从ftp服务器下载文件的方法.分享给大家供大家参考.具体实现方法如下: import ftplib ftp = ftblib.FTP("ftp.yourServer.com") ftp.login("username","password") filename = "index.html" ftp.storlines("STOR "+filename,open(filename

  • JavaScript实现的浏览器下载文件的方法

    废话不多说了,直接给大家贴代码了,具体代码如下所示: function download(src) { var $a = document.createElement('a'); $a.setAttribute("href", src); $a.setAttribute("download", ""); var evObj = document.createEvent('MouseEvents'); evObj.initMouseEvent( '

  • ASP.NET批量下载文件的方法

    本文实例讲述了ASP.NET批量下载文件的方法.分享给大家供大家参考.具体方法如下: 一.实现步骤 在用户操作界面,由用户选择需要下载的文件,系统根据所选文件,在服务器上创建用于存储所选文件的临时文件夹,将所选文件拷贝至临时文件夹.然后调用 RAR程序,对临时文件夹进行压缩,然后输出到客户端.最后删除临时文件夹.   二.代码实现   1.ASP.NET批量下载 核心代码 复制代码 代码如下: //遍历服务器指定文件夹下的所有文件 string path = "uploads/Image/&qu

  • Android实现多线程下载文件的方法

    Android实现多线程下载文件的方法

    本文实例讲述了Android实现多线程下载文件的方法.分享给大家供大家参考.具体如下: 多线程下载大概思路就是通过Range 属性实现文件分段,然后用RandomAccessFile 来读写文件,最终合并为一个文件 首先看下效果图: 创建工程 ThreadDemo 首先布局文件 threaddemo.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo

  • PHP实现从远程下载文件的方法

    本文实例讲述了PHP实现从远程下载文件的方法.分享给大家供大家参考.具体实现方法如下: <?php if ($_GET[xfer]) { if ($_POST[from] == "") { print "You forgot to enter a url."; } else { copy("$_POST[from]", "$_POST[to]"); $size = round((filesize($_POST[to])/

  • Delphi用TActionList实现下载文件的方法

    Delphi中的TActionList有个标准动作TDownLoadURL,内部是使用的URLDownloadToFile,它下载文件时会定时产生OnDownloadProgress 事件,这样就可以用进度条显示. 本文讲述了Delphi用TActionList实现下载文件的方法,实现代码如下所示: uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, ExtActns,

  • C#实现HTTP下载文件的方法

    本文实例讲述了C#实现HTTP下载文件的方法.分享给大家供大家参考. 主要实现代码如下: 复制代码 代码如下: /// <summary> /// Http下载文件 /// </summary> public static string HttpDownloadFile(string url, string path) {     // 设置参数     HttpWebRequest request = WebRequest.Create(url) as HttpWebReques

随机推荐