前端实现调用后台接口下载，arraybuffer和blob

下载

封装调用接口方法

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()