本文主要是介绍在工作中遇到的后端接口返回一个二进制数据流,前端在界面上创建下载按钮并下载成对应格式的文件导出。
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);}
}
导出主要是通过创建一个 url
并自行下载。