js根据base64下载文件

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

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

// base64转换const base64ToArrayBuffer = (base64) => {var binaryString = window.atob(base64)var binaryLen = binaryString.lengthvar 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 = objectUrllink.download = reportNamelink.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 } = resconst sampleArr = base64ToArrayBuffer(bytes); // 这里先调用base64ToArrayBuffer将base64转为二进制流saveByteArray(fileName, sampleArr) // 然后将文件名称和数据流直接给到saveByteArray方法进行下载}

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