写在前面
- 本方法兼容至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
网友评论