后端接口返回二进制数据流，前端如何将其转换成对应的excel、csv和json文件格式并下载-编程知识

后端接口返回二进制数据流，前端如何将其转换成对应的excel、csv和json文件格式并下载

本文主要是介绍在工作中遇到的后端接口返回一个二进制数据流，前端在界面上创建下载按钮并下载成对应格式的文件导出。

downloadData({start: startTime,end: endTime,exportType: 0, // 0-excel, 1-csv, 2-json
}).then((res) => {download(res, startTime, endTime, exportType);
})

接口会返回一个二进制数据流，如下图所示。
后端二进制流
startTime 和 endTime 是用来构建文件名字，exportType 是用来确定导出文件格式后缀的。

功能图
根据对应的按钮获取对应文件，并由浏览器进行下载。

const download = (res: any, startDate: any, endDate: any, exportType: any) => {const blob = new Blob([res])let filename = "";let startPrefix = new Date(startDate);let endPrefix = new Date(endDate);// 起名let date = startPrefix.getFullYear().toString() + (startPrefix.getMonth() + 1 < 10 ? '0' + (startPrefix.getMonth() + 1) : startPrefix.getMonth() + 1) +startPrefix.getDate().toString() + '-' + endPrefix.getFullYear().toString() + (endPrefix.getMonth() + 1 < 10 ? '0' + (endPrefix.getMonth() + 1) : endPrefix.getMonth() + 1) + endPrefix.getDate().toString();// 判断后缀if (exportType=== 0) filename = date + '.json';else if (exportType === 1) filename = date + '.xlsx';else filename = date + '.csv';if (typeof window.navigator.msSaveBlob !== 'undefined') {window.navigator.msSaveBlob(blob, filename);} else {// 导出const url: any = window.URL.createObjectURL(blob);const link = document.createElement('a');link.style.display = 'none';link.href = url;link.setAttribute('download', filename);document.body.appendChild(link);link.click();URL.revokeObjectURL(url.href);document.body.removeChild(link);}
}