Egg + xlsxJs 实现前后端Excel下载功能

一. 准备工作

准备相关的npm依赖：

npm install xlsx;
npm install file-saver;

二. 后端Egg实现

const xlsx = require('xlsx');
const { ctx } = this;
const data = [{
	title: '1',
	name: 'LJJ',
},{
	title: '2',
	name: 'LJJ2',
}]
// 创建新的文件簿
const wb = xlsx.utils.book_new();
// 新Sheet
const sheet1 = xlsx.utils.json_to_sheet(data);
// 拼接SHeet 和文件簿
xlsx.utils.book_append_sheet(wb, sheet1, 'Sheet');
// 输出Buffer流，记得是binary
const buff = xlsx.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });
ctx.body = {
  data: buff
};

三. 前端接收

我们可以创建一个downloadUtil.ts文件：

const fileSaver = require('file-saver');

export function s2ab(s) {
    var buf = new ArrayBuffer(s.length), view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
}
/**
 * 下载对应的文件流
 * @param buffer 后端输出的buffer流，需要是binary类型的。
 * @param fileName 文件名称
 */
export const downExcelFileFromStream = (buffer: any, fileName) => {
    fileSaver.saveAs(new Blob([s2ab(buffer)], {
        type: 'application/octet-stream',
    }), `${fileName}.xlsx`);
}

传入后端返回的buffer流以及一个文件名称即可。最终的下载文件：