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

青灯文案12024-05-07 9:38

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

java 复制代码

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

接口会返回一个二进制数据流，如下图所示。

startTime 和 endTime 是用来构建文件名字，exportType 是用来确定导出文件格式后缀的。

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

java 复制代码

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 并自行下载。