ajax请求下载文件

写在前面

• 本方法兼容至ie10+，有其他兼容需求者避免入坑（smile~）
• 实现基础: createObjectURL、Blob、msSaveBlob、后端返回buffer

---

首先我们来看一下基础里提到的几个API

createObjectURL

创建一个新的对象URL,该对象URL可以代表某一个指定的File对象或Blob对象.

语法

objectURL = window.URL.createObjectURL(blob);

• blob参数是一个File接口提供了文件的信息，以及文件内容的存取方法。")对象或者Blob一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件.")对象.
• objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容.

Blob

Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File文件(File) 接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。") 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

方法

Blob.slice() 方法用于创建一个包含源 Blob的指定字节范围内的数据的新 Blob 对象。")返回一个新的 Blob对象，包含了源 Blob对象中指定范围内的数据。

msSaveBlob

Internet Explorer 10 的 msSaveBlob和 msSaveOrOpenBlob 方法允许用户在客户端上保存文件，方法如同从 Internet 下载文件，这是此类文件保存到“下载”文件夹的原因。

示例

实现案例：

• 后端代码 (node)

const express = require('express')
const app = express()
app.post('*', (req, res) => {
    res.send(new Buffer('this is a test demo'))
})

• 前端代码

const axios = require('axios')
let Service = axios.create({
  timeout: 60 * 1000,
  baseURL: 'https://www.xxx.com',
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})
Service.post('/xxx/xxx/importExcel', param, { responseType: 'arraybuffer' }).then((res) => {
  let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
  let fileName = 'excel.xls'
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, fileName)
  } else {
    var link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = fileName
    link.click()
    window.URL.revokeObjectURL(link.href)
  }
  return res
}).catch((res) => {
  console.log(res.msg)
})  

代码说明

后端返回一个buffer，前端设置接收类型为arraybuffer，{ responseType: 'arraybuffer' }，前端取到buffer时为一个对象。
通过buffer.data取到buffer值，通过blob设置type为文件格式。例如： new Blob([res.data], {type: 'application/vnd.ms-excel'}) ，就是将文件设置为excel文件格式。
写兼容代码，判断navigator上是否有msSaveOrOpenBlob方法，true则为IE10+环境，导出文件代码navigator.msSaveBlob(blob, fileName)，false则使用a标签，设置href指向createObjectURL文件 window.URL.createObjectURL(blob)，调用click导出。最后revokeObjectURL释放文件内存。

End