前端JS处理后端文件流(a标签下载文件)

前端项目中，经常会遇见下载或上传文件需求，这里也简单给出自己的解决方案，主要解决前端发送ajax请求，后端返回二进制流数据，利用JS对流进行处理，最后利用a标签下载文件

1. 首先是前端触发请求入口，如点击按钮下载文件
2. 调用封装公用请求方法

        前提: 安装axios库，或者自己封装ajax方法

const downloadFile = (url, fileName) => {
  // url: 后端下载接口  fileName： 下载文件时，文件名称
  axios({
    method: 'get', // 此处不一定只是get方法，也可以通过参数传递
    url: url,
    responseType: 'blob', // 此处重点：标明后端返回数据类型为流
  }).then(res => {
    let blob = new Blob([res.data], {
      // 下载的文件类型(此处可更改：具体取值参考以下链接地址)
      type: "application/vnd.ms-excel"
    });
    let url = window.URL.createObjectURL(blob);
    let link = document.createElement('a');
    link.style.display = 'none';
    link.download = fileName
    link.href = url
    document.body.appendChild(link)
    link.click()
  }).catch(error => {
    console.log('下载文件失败')
  });
}

这种下载文件方式在前端项目中非常常见，最后简单梳理一下实现原理： 前端发送ajax请求，后端返回流数据，利用Blob对象处理流数据，生成a标签赋值url地址和download属性

注： Blob =》》 对象表示一个不可变、原始数据的类文件对象， 可参考网站: Blob - Web API 接口参考 | MDN