下载
封装调用接口方法
exportFileRequest(url,data) {
return axios({
method: 'post', //请求方式
responseType: 'arraybuffer', // 请求数据返回方式
// responseType: 'Blob',
url: url, // 请求地址
data: data, // 请求参数
headers: {}, // 与后台定义的请求头参数
});
}
下载函数
downloadEvent() {
let url = '接口地址'
let data = {} // 设置请求参数
this.exportFileRequest(url,data).then(res =>{ // 调用接口
let excelData = res.data
let url = window.URL.createObjectURL(new Blob([excelData],{type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}));
let link = document.createElement('a'); // 例用a标签的download属性实现下载
link.style.display = 'none';
link.href = url;
link.setAttribute('download', row.fileName);
document.body.appendChild(link);// 在页面中动态添加一个a标签
link.click()
document.body.removeChild(link); // 点击之后删除该dom节点
}).catch(error => {
console.log(error);
})
}
注：window.URL.createObjectURL
URL.createObjectURL()静态方法会创建一个DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的document绑定。这个新的URL 对象表示指定的File对象或Blob对象。
ArrayBuffer和blob
ArrayBuffer
ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。
它是一个字节数组，通常在其他语言中称为“byte array”。
你不能直接操作ArrayBuffer的内容，而是要通过类型数组对象或DataView对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。
Blob
Blob对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成ReadableStream来用于数据操作。
Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
要从其他非blob对象和数据构造一个Blob，使用Blob()构造函数。要创建一个 blob 数据的子集 blob，使用slice()方法。
区别
ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。
Blob (binary large object)，他表示一个不可变、原始数据的类文件对象，
blob类型只有slice方法，用于返回一个新的 Blob对象，包含了源 Blob对象中指定范围内的数据。
对比发现，ArrayBuffer的数据，是可以按照字节去操作的，而Blob的只能作为一个整的对象去处理。
所以说，ArrayBuffer相比Blob更接近真实的二进制，更底层。
相互转换
// arraybuffer转blob很方便，作为参数传入就行了。
var buffer = new ArrayBuffer(16)
var blob = new Blob([buffer])
//此处需要借助fileReader对象:
var blob = new Blob([1,2,3,4,5])
var reader = new FileReader()
reader.onload = function() {
console.log(this.result)
}
reader.readAsArrayBuffer(blob)
// 控制台输出的则是ArrayBuffer的数据了
参考文档：
前端 ArrayBuffer 与 Blob 互转、
MDN Blob、
MDN ArrayBuffer、
MDN URL.createObjectURL()
