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', width: 10}, {header: '用戶賬號', key: 'username', width: 16}, {header: '用戶姓名', key: 'nickname', width: 10}, {header: '注冊日期', key: 'createdAt', width: 20, style: {numFmt: 'yyyy/dd/mm hh:mm:ss'}}, {header: '啟用狀態', key: 'usertype', width: 15} ] }, };
使用該包遇到的最大麻煩是,前端如何接收文件數據。該包提供了三種文件數據輸出方式,1.直接writeFile()生成Excel文件,由前端直接訪問文件。2.write()方法生成文件數據,前端在新的標簽頁訪問URL,會自動將相應文件下載到本地;3.writeBuffer()生成buffer,由前端通過file-saver之類的前端工具轉為文件,由於Buffer數據URL傳輸過程中的序列化問題,沒有走通該方法,如有走通的朋友,可以留言,以供大家參考。