js根据base64下载文件

项目中有个下载模板的需求，接口直接给返回的是一个base64，如图

这里的bytes不是流格式，而是一个base64格式的，这就导致我们需要先将base64转为了流，然后通过new Blob方式下载文件就行，下面看代码

// base64转换
const base64ToArrayBuffer = (base64) => {
  var binaryString = window.atob(base64)
  var binaryLen = binaryString.length
  var bytes = new Uint8Array(binaryLen)
  for (var i = 0; i < binaryLen; i++) {
    var ascii = binaryString.charCodeAt(i)
    bytes[i] = ascii
  }
  return bytes
}

定义了一个base64转二进制流的方法，接下来开始根据得到的二进制流下载文件（new Blob登场）

const saveByteArray = (reportName, byte) =>{
   const link = document.createElement('a') // 创建a标签
    const blob = new Blob([byte], {
      type: 'application/vnd.ms-excel;charset=utf-8',
    }) // response就是接口返回的文件流
    const objectUrl = URL.createObjectURL(blob)
    link.href = objectUrl
    link.download = reportName
    link.click() // 下载文件
    URL.revokeObjectURL(objectUrl)
}

saveByteArray接收俩个参数 reportName，byte。reportName是下载文件的名称，byte是二进制流，接下来就是根据请求后端的接口获取模板信息（也就是base64）

const uploadfile = async () => {
    let params = { // 请求参数
      dataName: props.dataName,
      dataId: props.dataId,
    }
    let res = await quotaDataDownloadTemplate({ data: params })
    // 这个接口返回的res就是上面图中的信息具体
    const { bytes, fileName } = res
    const sampleArr = base64ToArrayBuffer(bytes); // 这里先调用base64ToArrayBuffer将base64转为二进制流
    saveByteArray(fileName, sampleArr) // 然后将文件名称和数据流直接给到saveByteArray方法进行下载
}

齐活儿，如果后端的模板信息返回的直接就是流数据，那么我们就可以直接通过saveByteArray方法来下载了，就不需要base64ToArrayBuffer了，所有这里需要和接口人员确定好他返回的是二进制流还是base64就行