如何用ajax下载文件

javascript/jquery

浏览数:144

2019-8-15

AD:资源代下载服务

引子

在HTML5没来之前,浏览器想要下载文件,可能有这么几种方式:

  1. 借助a标签,<a href="学习资料.xlsx"></a>

  2. window.location = '学习资料.xlsx'

  3. 借助浏览器插件,如flash等(没考证过)

除了第三外,前两种方法有个缺点,就是无法知道下载是否完成,因为浏览器没有给出相关的事件。但是,自从有了Blob,fetch, xhr2这些好用的API之后,ajax下载文件(小文件)就变得可行了,核心原因就在于Blob和ArrayBuffter这些API提供给了浏览器操作二进制文件的能力。接下来就开始我的表演

1. fetch方法

fetch优点有很多,比如基于promise,写起来直观易懂,缺点是IE,包括IE11全部不支持。
使用时要注意一点是,fetch请求时默认不会带上cookie,如果你的api是在登录后才能访问,记得手动设置 credentials选项。下面是下载一个文件的代码:

      fetch('学习资料.xlsx', {
        method: 'GET',
        credentials: "same-origin"// 带上cookie
      })
      .then(res => res.blob())

      .then(blob => {
        saveAs(blob) //fileSaver.js中的方法
      })

从上面可以看出,调用fetch时会返回一个promise,当promise resolve时,会传出一个Response的实例(res),这个res除了有statusstatusTextok 这几个属性用于获取服务器相应的状态值外,还有几个炫酷的方法,正式这几个方法,使浏览器可以请求的数据类型不再局限于文本,他们是:

res.blob() //返回值是一个promise,promise resolve后会拿到一个blob对象
res.json() //返回值是一个promise,promise resolve后会拿到一个json对象,无需再调用JSON.parse
res.text() //返回值是一个promise,promise resolve后会拿到一个字符串
res.formData() //返回值是一个promise,promise resolve后会拿到一个表单数据对象(formData)

所以拿到blob后,接下来就是触发浏览器的下载了,这里调用了一个saveAs函数,它来自FileSaver.js,一个不用请求api也可以触发浏览器下载动作的库,它接受一个blob对象,和一个可选的文件名称参数,就能触发下载动作。

2.xhr2方法

xhr2的兼容性比fetchAPI要好,兼容到IE10,它没有向fetch一样把难用的xhr推翻重做,而是做了一些有用的扩展,比如xhr.responseType,在发起请求前,通过设置这个属性,可以使浏览器对返回的数据进行处理,就像res的那些有用的方法一样。xhr.responseType可以取下列值:

  "arraybuffer",
  "blob",
  "document",
  "json",
  "text"

没错,就是和上面的res的那些方法殊途同归。当请求数据返回时,你可以从xhr.response拿到相应的数据。为什么不是res.responseText呢?很明显这是xhr1时期的,从这个属性只能拿到字符串,是满足不了我们的需求的。

接下来的事情就跟上面一样了,照例贴一下代码:

      var xhr = new XMLHttpRequest();
      xhr.responseType = 'blob';
      xhr.open('GET', url, true);
      xhr.onload = function(){
          var res = xhr.response;
          if(res){
            saveAs(res, filename);
          }
      }
      xhr.send();

到这里,你就可以从容掌握文件下载的状态了。最后再啰嗦一句,xhr.onload也是xhr2增加的事件,有了它,再也不想用xhr.onReadyStateChange了。其他新增的事件还有’onprocess’, ‘onerror’, ‘onabort’, ‘onloadstart’,’onloadend’, ‘ontimeout’。(完)

作者:nobody-junior