记录一下后端 NodeJS 下载接口 Buffer 数据, 前端 Vue3 实现

前言: 后端 nodejs 中, 要导出 excel 数据, 数据的格式可以用 Buffer, 而前端接收数据后, 需要正确的转换格式才能显示.

后端代码

    ''' 省略上面 ExcelJS 创建 excel 的过程
    const buffer: Buffer = await workbook.xlsx.writeBuffer();
    const fileName = `ProjectTracking.xlsx`
    return { data: buffer, fileName, mimetype: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' };

这里输出的是 data 是 Buffer 格式

前端 Vue 代码

        try {
            let res = await apiManager.exportExcel(trckingParams)
            // 正常取得 data 后, 要转换为 Buffer 格式
            const fileBinary = Buffer.from(res.data.data, 'binary');
            // 然后在转为 Blob 格式, 用 saveAs 库, 保存到硬盘.
            const blob = new Blob([fileBinary], { type: res.data.mimetype });
            await saveAs(blob, res.data.fileName)
            return false
        } catch (error) {
            console.error(error);
            return false
        }

上面前端代码要点是, data 的数据要先转为 Buffer 格式, 然后在转为 Blob 格式导出. 可以不用 saveAs, 直接用 a 标签导出也行.