Excel导入、导出是大多数项目的管理后台必备功能。几年来使用过多个该功能的实现包,最近一次开发该功能,突然发现一个人气极高(3000+)的包,这里记录一下使用方法。
大凡厉害的技术的文档咋一看都想字典一样,让人懵逼。exceljs这个包也貌似不易入手,但实际上,还是很简单易用的。
导出
// controller.js
const workbook = new Excel.Workbook();
const worksheet = workbook.addWorksheet();
worksheet.columns = excelInfo.balanceFlow.columns;
worksheet.addRows(result.rows);
ctx.response.attachment(excelInfo.balanceFlow.filename);
ctx.status = 200;
await workbook.xlsx.write(ctx.res);
ctx.res.end();
同上文代码,引入包、创建工作簿(同创建excel文件)、创建工作页(同Excel的sheet1编辑)、写表头、写表格数据、最后输出文件流,就这么简单几步就完成了Excel文件的导出。其中,addRows()方法的传参,是传最常规的列表数据结构,形如[{},{},{}...]。
这里简单啰嗦一下,所谓本文的Excel文件导出,实际是服务端从数据库获取数据,并用获取到的数据生成Excel文件的过程 。
Excel表头配置文件如下:
module.exports = { userList: { filename: '用户列表.xlsx', columns: [ {header: '用户ID', key: 'id', 10}, {header: '用户账号', key: 'username', 16}, {header: '用户姓名', key: 'nickname', 10}, {header: '注册日期', key: 'createdAt', 20, style: {numFmt: 'yyyy/dd/mm hh:mm:ss'}}, {header: '启用状态', key: 'usertype', 15} ] }, };
使用该包遇到的最大麻烦是,前端如何接收文件数据。该包提供了三种文件数据输出方式,1.直接writeFile()生成Excel文件,由前端直接访问文件。2.write()方法生成文件数据,前端在新的标签页访问URL,会自动将相应文件下载到本地;3.writeBuffer()生成buffer,由前端通过file-saver之类的前端工具转为文件,由于Buffer数据URL传输过程中的序列化问题,没有走通该方法,如有走通的朋友,可以留言,以供大家参考。