做后臺(tái)管理系統(tǒng)開(kāi)發(fā)的朋友應(yīng)該都有同感把當(dāng)前表格導(dǎo)出成Excel這個(gè)需求幾乎在每個(gè)項(xiàng)目里都會(huì)撞見(jiàn)。以前我習(xí)慣把活甩給后端后端拼文件、返回地址、前端觸發(fā)下載一條鏈路看似順暢但一旦碰樣式就難受了。今天要帶個(gè)篩選條件、明天表頭要多加一行、后天某個(gè)列要標(biāo)紅來(lái)回溝通的成本比寫(xiě)代碼還高。后來(lái)在某個(gè)Vue3項(xiàng)目中我徹底切到了ExcelJS導(dǎo)出邏輯完整放在前端做自己取數(shù)、自己排版、自己導(dǎo)出樣式隨手就能控制再也不用夾在后端和產(chǎn)品之間傳話了。這篇文章就圍繞ExcelJS在Vue3里的原生導(dǎo)出和樣式設(shè)置展開(kāi)我會(huì)從方案選型、樣式API拆解、完整模塊實(shí)現(xiàn)到常見(jiàn)坑位排查把我實(shí)際跑通的一整套東西整理出來(lái)。適合正在用Vue3寫(xiě)后臺(tái)、被導(dǎo)出需求反復(fù)折騰的開(kāi)發(fā)者參考。不管你是剛接觸ExcelJS還是已經(jīng)用過(guò)但被樣式細(xì)節(jié)卡住這篇應(yīng)該都能幫你省下不少時(shí)間。1. 方案選型與整體設(shè)計(jì)思路1.1 為什么最終選了ExcelJS而不是其他方案前端生成Excel的庫(kù)其實(shí)不止一個(gè)早期我試過(guò)直接拼HTML表格再轉(zhuǎn)xls的老套路那玩意生成的文件打開(kāi)會(huì)帶格式警告兼容性也差。也用過(guò)一個(gè)比較流行的輕量庫(kù)它的文件體積確實(shí)小但核心能力是表格數(shù)據(jù)序列化沒(méi)有workbook、worksheet這種完整的電子表格對(duì)象模型更別提操作樣式。想實(shí)現(xiàn)合并單元格、設(shè)置凍結(jié)窗格、控制某個(gè)單元格的字體顏色它基本上是無(wú)能為力的頂多套一層最原始的樣式模板。ExcelJS吸引我的點(diǎn)是它建立了一整套完整的Excel對(duì)象模型。Workbook對(duì)應(yīng)整個(gè)工作簿W(wǎng)orksheet對(duì)應(yīng)底部標(biāo)簽頁(yè)Cell對(duì)應(yīng)每個(gè)格子同時(shí)提供了從行列、邊框、字體到填充、條件格式、批注、圖片的全體系A(chǔ)PI。這意味著我可以用接近Excel操作習(xí)慣的思維方式來(lái)寫(xiě)代碼而不是為了導(dǎo)出一個(gè)文件去想各種奇技淫巧。它在NPM上的周下載量、社區(qū)活躍度和文檔完整度也是當(dāng)時(shí)幾個(gè)候選方案里最穩(wěn)的。另外ExcelJS生成的是真正的xlsx文件基于OpenXML標(biāo)準(zhǔn)不需要依賴Excel環(huán)境用WPS、Office或者在線文檔打開(kāi)都沒(méi)問(wèn)題。這一點(diǎn)在團(tuán)隊(duì)協(xié)作和跨平臺(tái)場(chǎng)景里非常重要。后端導(dǎo)出Excel通常要專門(mén)部署模板文件、維護(hù)服務(wù)而ExcelJS可以全部放在瀏覽器端完成對(duì)后端資源零占用甚至可以把導(dǎo)出邏輯沉淀成前端公共模塊以后每個(gè)頁(yè)面復(fù)用就行。1.2 Vue3里的導(dǎo)出架構(gòu)思路在Vue3項(xiàng)目里用ExcelJS我通常不是把它直接散落在各個(gè)業(yè)務(wù)組件里而是單獨(dú)做一個(gè)導(dǎo)出模塊。這個(gè)模塊做的事情是接收原始數(shù)據(jù)、接收列配置、內(nèi)部完成workbook的創(chuàng)建、sheet數(shù)據(jù)的填充、樣式的批量應(yīng)用最后統(tǒng)一輸出Blob文件。業(yè)務(wù)組件只需要傳數(shù)據(jù)和配置不用關(guān)心Excel細(xì)節(jié)。這樣設(shè)計(jì)的好處很明顯一是樣式邏輯收斂在一個(gè)地方以后調(diào)表頭顏色、換字體不用每個(gè)頁(yè)面都去改二是統(tǒng)一的入口方便做擴(kuò)展比如批量導(dǎo)出多個(gè)sheet、導(dǎo)出帶圖片的報(bào)表都能在模塊層面集中處理。我習(xí)慣把列配置定義成數(shù)組每項(xiàng)包含字段名、表頭文字、列寬、對(duì)齊方式、數(shù)字格式等元信息然后由導(dǎo)出模塊統(tǒng)一解析這樣的擴(kuò)展性最好。在實(shí)際項(xiàng)目中導(dǎo)出模塊還會(huì)處理好幾個(gè)跨頁(yè)面通用的細(xì)節(jié)比如文件命名加日期、導(dǎo)出成功后的用戶提示、大數(shù)據(jù)量場(chǎng)景下前端分批處理的邏輯等。這些看起來(lái)是小點(diǎn)但散落在每個(gè)頁(yè)面里寫(xiě)很容易不一致集中放在模塊里會(huì)省心很多。2. ExcelJS樣式體系逐項(xiàng)拆解2.1 從單元格對(duì)象說(shuō)起ExcelJS的樣式操作核心單元是Cell。每個(gè)Cell本身是一個(gè)對(duì)象上面掛著一系列樣式相關(guān)的屬性font、alignment、border、fill、numFmt以及保護(hù)相關(guān)的lock等。操作方式很直接拿到單元格對(duì)象后直接給屬性賦值例如const cell sheet.getCell(A1); cell.value 標(biāo)題; cell.font { name: 微軟雅黑, size: 14, bold: true, color: { argb: FFFF0000 } };這里面有個(gè)細(xì)節(jié)值得注意ExcelJS的字體顏色、填充顏色這類顏色值使用的是ARGB格式也就是8位十六進(jìn)制最前面兩個(gè)字節(jié)是Alpha通道實(shí)際寫(xiě)的時(shí)候通常直接寫(xiě)FF加6位色值。很多人第一次用會(huì)寫(xiě)#FF0000或者只寫(xiě)6位色值結(jié)果顏色不生效就是這個(gè)原因。顏色值同樣適用于邊框、填充。另一個(gè)習(xí)慣是先定義好一個(gè)樣式對(duì)象再賦給多個(gè)單元格避免一個(gè)個(gè)手寫(xiě)。不過(guò)這里有個(gè)需要意識(shí)到的點(diǎn)賦值的是對(duì)象引用后續(xù)如果修改這個(gè)對(duì)象已經(jīng)賦過(guò)值的單元格樣式也會(huì)跟著變。如果希望每個(gè)單元格獨(dú)立建議用淺拷貝的方式處理。2.2 字體、對(duì)齊與填充的完整參數(shù)字體這塊常用屬性包括name字體名、size字號(hào)、bold加粗、italic斜體、underline下劃線、color顏色。實(shí)際項(xiàng)目里最常用的就是中文環(huán)境中設(shè)置微軟雅黑或者宋體表頭加粗。這里有一個(gè)中文場(chǎng)景容易踩的坑如果導(dǎo)出文件在別人電腦上打開(kāi)但對(duì)方機(jī)器沒(méi)有你在代碼里指定的字體Excel/WPS會(huì)自動(dòng)替換成默認(rèn)字體導(dǎo)致排版看起來(lái)不一樣。所以在字體選擇上盡量用通用性強(qiáng)的字體。對(duì)齊方式通過(guò)alignment屬性配置常用的包括cell.alignment { horizontal: center, // 水平left、center、right、fill、justify、centerContinuous vertical: middle, // 垂直top、middle、bottom wrapText: true, // 是否自動(dòng)換行 textRotation: 0, // 文字旋轉(zhuǎn)角度 indent: 1 // 縮進(jìn) };horizonta和vertical這里特別容易寫(xiě)錯(cuò)拼寫(xiě)我發(fā)現(xiàn)實(shí)際項(xiàng)目里很多坑都是拼寫(xiě)導(dǎo)致樣式不生效。另外wrapText: true這個(gè)屬性很實(shí)用像地址、描述這類長(zhǎng)文本列有了自動(dòng)換行才能保證行高撐開(kāi)內(nèi)容不會(huì)溢出到旁邊格子。填充樣式分為兩種模式最常用的是純色填充cell.fill { type: pattern, pattern: solid, fgColor: { argb: FFF4B183 } };如果要做漸變或者雙色斜紋效果需要調(diào)整pattern為其他枚舉值但實(shí)際業(yè)務(wù)報(bào)表里很少用到。表頭加底色、奇數(shù)偶數(shù)行交替配色、合計(jì)行標(biāo)灰用solid模式就完全夠用了。這里補(bǔ)充一下fgColor是前景色在solid模式里就是你看到的主顏色bgColor是背景色在pattern模式下才會(huì)作為襯底顏色顯示不要搞反了。2.3 邊框、合并與凍結(jié)邊框是最能體現(xiàn)表格專業(yè)感的樣式。默認(rèn)導(dǎo)出的Excel是沒(méi)有邊框的數(shù)據(jù)一多看起來(lái)就像散裝文本。ExcelJS里邊框分上下左右四個(gè)方向每個(gè)方向可以設(shè)置style和colorcell.border { top: { style: thin, color: { argb: FF000000 } }, left: { style: thin, color: { argb: FF000000 } }, bottom: { style: thin, color: { argb: FF000000 } }, right: { style: thin, color: { argb: FF000000 } } };style支持的值包括thin、medium、thick、dashed、dotted、double等日常報(bào)表用thin就夠合計(jì)行上方用medium或thick做分隔線會(huì)更有層次感。這里有一個(gè)效率上的建議與其給每個(gè)單元格單獨(dú)設(shè)置四邊不如按行列批量遍歷設(shè)置后面我會(huì)在實(shí)操部分給出具體寫(xiě)法。合并單元格在報(bào)表里非常常見(jiàn)比如大標(biāo)題跨多列、分組表頭跨兩行。ExcelJS里合并操作很簡(jiǎn)單sheet.mergeCells(A1:F1);合并之后值只需要寫(xiě)在合并區(qū)域左上角那個(gè)單元格里其他單元格會(huì)變成合并區(qū)域的一部分不能再單獨(dú)賦值。如果有邊框需求合并后只需要給左上角單元格設(shè)置邊框整塊合并區(qū)域會(huì)統(tǒng)一渲染。這里有個(gè)小坑合并單元格后再通過(guò)getCell去拿區(qū)域內(nèi)其他格子的值會(huì)拿到null因?yàn)樗鼈冊(cè)诤喜^(qū)里沒(méi)有獨(dú)立存在。遍歷數(shù)據(jù)時(shí)要注意別去操作合并區(qū)域內(nèi)的其他單元格。凍結(jié)窗格也是后臺(tái)報(bào)表的高頻需求尤其數(shù)據(jù)行數(shù)多的時(shí)候。配置方式如下sheet.views [{ state: frozen, xSplit: 1, ySplit: 1 }];xSplit和ySplit分別表示凍結(jié)列數(shù)和凍結(jié)行數(shù)。比如ySplit: 1是凍結(jié)第一行表頭滾動(dòng)數(shù)據(jù)時(shí)表頭永遠(yuǎn)可見(jiàn)。配合x(chóng)Split: 1可以同時(shí)凍結(jié)第一列適合字段多、需要橫向滾動(dòng)的寬表。注意這個(gè)賦值是給整個(gè)sheet的view配置而不是某一行或某一列。2.4 行列級(jí)別的樣式控制除了單元格ExcelJS還支持行列級(jí)別的操作這在設(shè)置列寬、行高和整行整列樣式時(shí)非常高效。列寬設(shè)置有兩種方式。一種是在定義columns時(shí)直接帶widthsheet.columns [ { header: 姓名, key: name, width: 15 }, { header: 年齡, key: age, width: 8 } ];另一種是后續(xù)通過(guò)列索引調(diào)整某個(gè)列寬度sheet.getColumn(3).width 20;行高默認(rèn)情況下Excel會(huì)根據(jù)內(nèi)容自動(dòng)調(diào)整但設(shè)置了固定行高后內(nèi)容再多也不會(huì)撐開(kāi)。所以如果某個(gè)列開(kāi)了自動(dòng)換行建議給對(duì)應(yīng)的行設(shè)置足夠的高度或者干脆不設(shè)置行高讓它自適應(yīng)。需要給所有數(shù)據(jù)行統(tǒng)一樣式時(shí)可以遍歷行sheet.eachRow((row, rowNumber) { row.height 22; row.eachCell((cell) { cell.alignment { vertical: middle }; }); });注意eachRow遍歷的范圍默認(rèn)是存在內(nèi)容的行。如果中途通過(guò)row.height ...設(shè)置了高度但這個(gè)行本身沒(méi)有數(shù)據(jù)遍歷時(shí)不會(huì)到達(dá)。更保險(xiǎn)的做法是先填完所有數(shù)據(jù)最后再統(tǒng)一處理樣式。3. 從零搭建帶樣式的導(dǎo)出模塊3.1 安裝與基礎(chǔ)封裝安裝ExcelJS很簡(jiǎn)單一條命令npm install exceljs它有自己的TypeScript類型定義Vue3項(xiàng)目一般也都用TS類型提示很全。初始化一個(gè)workbook的常規(guī)流程是import ExcelJS from exceljs; const workbook new ExcelJS.Workbook(); workbook.creator 某公司前端導(dǎo)出模塊; workbook.created new Date();creator和created這兩個(gè)屬性會(huì)寫(xiě)入文件元信息雖然不是必須的但每次導(dǎo)出都帶上方便文件管理。接著添加工作表const sheet workbook.addWorksheet(數(shù)據(jù)報(bào)表, { properties: { defaultRowHeight: 20 } });工作表名稱有長(zhǎng)度限制而且不能包含\ / ? * [ ] :這些字符命名的時(shí)候最好做一層校驗(yàn)。addWorksheet的第二個(gè)參數(shù)還支持很多配置比如views凍結(jié)設(shè)置、pageSetup打印設(shè)置、tabColor標(biāo)簽頁(yè)顏色這些按需使用。3.2 表頭與標(biāo)題區(qū)的處理實(shí)際項(xiàng)目中一份稍微像樣的報(bào)表通常會(huì)有一個(gè)總標(biāo)題、一個(gè)表頭行再加數(shù)據(jù)區(qū)。我用一個(gè)完整的導(dǎo)出函數(shù)來(lái)演示它接收數(shù)據(jù)數(shù)組和列配置數(shù)組function exportExcel(rows, columns, fileName) { const workbook new ExcelJS.Workbook(); const sheet workbook.addWorksheet(Sheet1); // 列配置 sheet.columns columns.map(col ({ header: col.title, key: col.field, width: col.width || 15 })); // 添加標(biāo)題行并合并 const titleRow sheet.addRow([銷售數(shù)據(jù)報(bào)表]); sheet.mergeCells(A1:${sheet.getColumn(columns.length).letter}1); titleRow.height 30; const titleCell sheet.getCell(A1); titleCell.font { size: 16, bold: true }; titleCell.alignment { horizontal: center, vertical: middle }; // ... }這里有個(gè)關(guān)鍵點(diǎn)sheet.columns設(shè)置了列頭信息之后sheet.addRow添加數(shù)據(jù)會(huì)自動(dòng)按照配置里的key和header來(lái)映射。但如果我們頂部插入了標(biāo)題行表頭行的位置會(huì)往下挪。純用addRow的話ExcelJS會(huì)默認(rèn)把第一行當(dāng)成表頭并寫(xiě)入header值這與我們插入標(biāo)題行會(huì)有沖突。所以這里建議換一種處理方式先通過(guò)getRow拿到指定行號(hào)手動(dòng)賦值單元格。const headerRow sheet.getRow(2); columns.forEach((col, index) { const cell headerRow.getCell(index 1); cell.value col.title; cell.font { bold: true, color: { argb: FFFFFFFF } }; cell.fill { type: pattern, pattern: solid, fgColor: { argb: FF4472C4 } }; cell.alignment { horizontal: center, vertical: middle }; }); headerRow.height 24;這種手動(dòng)定位行的方式雖然代碼多一點(diǎn)但對(duì)于復(fù)雜報(bào)表的排布其實(shí)更可控。表頭背景色我一般用深藍(lán)色系、白字加粗打開(kāi)后視覺(jué)效果比較清晰。3.3 數(shù)據(jù)區(qū)的樣式編排數(shù)據(jù)區(qū)緊跟著表頭往下排。最簡(jiǎn)單的方式是把原始數(shù)據(jù)逐行addRow再統(tǒng)一設(shè)置樣式。逐行添加有一個(gè)好處ExcelJS會(huì)根據(jù)sheet.columns的key自動(dòng)匹配每個(gè)字段填充到對(duì)應(yīng)列字段缺失就留空不用擔(dān)心列錯(cuò)位。rows.forEach(item { sheet.addRow(item); });但這里有個(gè)樣式會(huì)話的細(xì)節(jié)如果先全部加完數(shù)據(jù)再遍歷設(shè)置樣式數(shù)據(jù)量大時(shí)會(huì)產(chǎn)生多次對(duì)象訪問(wèn)如果每加一行立刻設(shè)置該行樣式代碼會(huì)顯得重復(fù)。我的做法是先把數(shù)據(jù)全部寫(xiě)入再統(tǒng)一遍歷處理樣式這樣邏輯清晰性能也更可控。sheet.eachRow((row, rowNumber) { if (rowNumber 2) return; row.height 22; row.eachCell(cell { cell.border { top: { style: thin, color: { argb: FFD9D9D9 } }, left: { style: thin, color: { argb: FFD9D9D9 } }, bottom: { style: thin, color: { argb: FFD9D9D9 } }, right: { style: thin, color: { argb: FFD9D9D9 } } }; cell.alignment { vertical: middle, horizontal: center }; }); });交替行配色我習(xí)慣通過(guò)判斷行號(hào)奇偶來(lái)實(shí)現(xiàn)sheet.eachRow((row, rowNumber) { if (rowNumber 2 rowNumber % 2 0) { row.eachCell(cell { cell.fill { type: pattern, pattern: solid, fgColor: { argb: FFF2F6FC } }; }); } });這里有個(gè)性能上的考慮如果是幾千行的大表eachRow加eachCell遍歷單元格的次數(shù)會(huì)非常多。可以改為按整行設(shè)置樣式ExcelJS會(huì)把這些樣式記錄在行級(jí)別而不是逐個(gè)格子都存一份樣式對(duì)象文件體積和內(nèi)存占用都會(huì)收斂不少。數(shù)字格式是容易被忽略但很重要的部分。金額、百分比、日期這些類型如果沒(méi)有正確設(shè)置numFmt導(dǎo)出后要么變成一串?dāng)?shù)字要么是時(shí)間戳格式看起來(lái)很業(yè)余。比如金額列cell.numFmt #,##0.00;日期列cell.numFmt yyyy-mm-dd;百分比列cell.numFmt 0.00%;這些格式等同于Excel里的設(shè)置單元格格式-數(shù)字-自定義效果。日期類還有一個(gè)坑ExcelJS中寫(xiě)入日期建議用new Date()對(duì)象底層會(huì)自動(dòng)做OADate序列化但需要配合numFmt才會(huì)顯示成年月日否則打開(kāi)就是原始數(shù)字。3.4 收尾workbook到文件的完整流程所有數(shù)據(jù)和樣式都填充完畢后生成文件有統(tǒng)一的收尾流程const buffer await workbook.xlsx.writeBuffer(); const blob new Blob([buffer], { type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet }); const url URL.createObjectURL(blob); const link document.createElement(a); link.href url; link.download ${fileName || export}.xlsx; link.click(); URL.revokeObjectURL(url);writeBuffer在不同版本里返回類型略有差異有些需要buffer或處理二進(jìn)制類型但現(xiàn)代瀏覽器環(huán)境下使用這個(gè)方法基本都是穩(wěn)的。URL.revokeObjectURL一定要在a.click()之后調(diào)用否則部分瀏覽器可能還沒(méi)完成下載就已經(jīng)把地址回收了。文件名方面我會(huì)在模塊內(nèi)部拼上當(dāng)前日期比如銷售報(bào)表_20250718.xlsx這樣導(dǎo)出多份不會(huì)互相覆蓋。這里有個(gè)容易出問(wèn)題的點(diǎn)如果文件名包含中文直接給link.download賦值是沒(méi)問(wèn)題的現(xiàn)代瀏覽器都能處理但如果項(xiàng)目通過(guò)接口下載頭部Content-Disposition就需要額外處理URL編碼反正ExcelJS方案不走接口省掉了這層麻煩。4. 常見(jiàn)問(wèn)題與排查經(jīng)驗(yàn)4.1 樣式被覆蓋是最大的坑實(shí)際開(kāi)發(fā)中明明設(shè)置了樣式打開(kāi)文件卻沒(méi)有這類問(wèn)題出現(xiàn)頻率最高。排查下來(lái)大部分原因是對(duì)同一個(gè)單元格的樣式屬性做了多次賦值后一次賦值覆蓋了前一次的部分字段。比如先賦了font后面又整體賦了一個(gè)新的font對(duì)象這個(gè)新對(duì)象里漏掉了color顏色就丟了。有一種情況特別隱蔽ExcelJS大概在3.x版本之后有了styles管理機(jī)制同一個(gè)單元格如果先設(shè)置fill再設(shè)置font正常不會(huì)互相影響。但如果你在一次循環(huán)里先給單元格賦值cell.value隨后馬上設(shè)置樣式而這個(gè)單元格之前已經(jīng)被其他邏輯賦過(guò)樣式則完全覆蓋的風(fēng)險(xiǎn)就存在。我的習(xí)慣是每個(gè)單元格的樣式統(tǒng)一用一次對(duì)象賦值完成而不是拆成多次。如果確實(shí)需要分步設(shè)置每次都顯式把需要的字段寫(xiě)全。另外盡量用cell.style {...}直接覆蓋整個(gè)樣式對(duì)象比一個(gè)個(gè)cell.font ...、cell.fill ...更可控。不過(guò)cell.style在舊版本里支持新版API推薦直接斷言屬性具體以當(dāng)前版本為準(zhǔn)兩種方式都可以。4.2 列寬、行高的單位問(wèn)題ExcelJS里列寬和Excel界面上的顯示表現(xiàn)有差異。Excel界面上看到的列寬單位是英文字符數(shù)ExcelJS用的是這個(gè)邏輯的近似值。如果你設(shè)置width: 20打開(kāi)Excel后大概就是20個(gè)字符的寬度。中文字符比英文字符寬所以如果傳輸中文列需要手動(dòng)加大width系數(shù)不然中文會(huì)顯示不全。我的經(jīng)驗(yàn)是中文表頭寬度系數(shù)給1.5左右比如操作人這種列給15到18打開(kāi)就能完整顯示。行高方面ExcelJS的默認(rèn)單位是磅point和Excel的行高是同一套體系所以不需要額外換算。但如果某個(gè)單元格字體比較大、內(nèi)容超過(guò)兩行而設(shè)置了固定行高內(nèi)容會(huì)被截?cái)囡@示。這時(shí)要么去除該行的高度設(shè)置要么在設(shè)置wrapText: true的同時(shí)手動(dòng)把行高算到足夠容納內(nèi)容的值。一個(gè)粗暴但有效的做法是依據(jù)該行可能最長(zhǎng)的字段字?jǐn)?shù)乘上一個(gè)估算系數(shù)設(shè)置足夠大的行高。4.3 大數(shù)據(jù)量的性能優(yōu)化當(dāng)數(shù)據(jù)量達(dá)到幾千行甚至上萬(wàn)行時(shí)逐格設(shè)置樣式會(huì)有明顯的卡頓。ExcelJS本身在前端做序列化需要時(shí)間樣式越多、writeBuffer的耗時(shí)越長(zhǎng)這是正常的但仍有一些優(yōu)化空間。首先是樣式壓縮盡量復(fù)用同一個(gè)樣式對(duì)象不要每行都創(chuàng)建新的。比如交替色、邊框、對(duì)齊方式這些分別抽成常量循環(huán)里只把常量賦值給單元格ExcelJS內(nèi)部會(huì)根據(jù)樣式內(nèi)容做去重處理文件體積明顯變小生成速度也能快一些。其次避免頻繁調(diào)用getCell這種按坐標(biāo)取單元格的方式在eachRow里用row.eachCell或直接按row.getCell(index)更高效。上萬(wàn)行數(shù)據(jù)時(shí)節(jié)點(diǎn)遍歷的調(diào)用次數(shù)是幾何級(jí)增長(zhǎng)的任何多余操作都會(huì)被放大。如果數(shù)據(jù)量真的巨大比如說(shuō)幾十萬(wàn)行前端導(dǎo)出本身就是不合理的方案。這種場(chǎng)景應(yīng)該限制導(dǎo)出條數(shù)或者在后端做異步導(dǎo)出任務(wù)。ExcelJS雖然有stream寫(xiě)文件的能力但在瀏覽器端受限于jszip的內(nèi)存開(kāi)銷穩(wěn)定性并不好不如在服務(wù)端做。4.4 文件損壞、日期序列化等其他雜癥配置了合并單元格后生成文件打不開(kāi)或者打開(kāi)提示文件已損壞多數(shù)原因是合并區(qū)域跨度過(guò)大并且區(qū)域內(nèi)左上角單元格無(wú)值或者合并區(qū)域與其他合并區(qū)域產(chǎn)生了重疊沖突。ExcelJS不會(huì)在生成時(shí)主動(dòng)檢測(cè)這種邏輯錯(cuò)誤需要自己確認(rèn)。常見(jiàn)錯(cuò)誤比如mergeCells(A1:C1)后又對(duì)B1單獨(dú)賦值或者兩個(gè)合并區(qū)域部分重疊都會(huì)導(dǎo)致文件結(jié)構(gòu)異常。日期序列化問(wèn)題前面提到過(guò)不設(shè)置numFmt、直接賦值Date對(duì)象會(huì)變成OADate數(shù)字。還有一種情況是后端接口返回的日期是字符串格式ExcelJS不會(huì)自動(dòng)識(shí)別為日期導(dǎo)出后就是文本。要在前端先轉(zhuǎn)成Date對(duì)象再賦值。注意時(shí)區(qū)問(wèn)題如果項(xiàng)目有UTC偏移處理轉(zhuǎn)成Date對(duì)象后寫(xiě)入Excel的日期可能與預(yù)期相差8小時(shí)最好確認(rèn)接口返回的時(shí)間字段已經(jīng)經(jīng)過(guò)了統(tǒng)一處理。還有一點(diǎn)如果單元格的值以開(kāi)頭ExcelJS會(huì)把整段內(nèi)容當(dāng)作公式處理。比如導(dǎo)出分類編號(hào)精裝這種文本打開(kāi)文件時(shí)會(huì)顯示為公式錯(cuò)誤。需要轉(zhuǎn)成字符串的格式。處理方案有兩種一種是寫(xiě)入時(shí)手動(dòng)加單引號(hào)前綴Excel打開(kāi)時(shí)會(huì)當(dāng)作文本另一種是使用cell.value { text: 精裝 }這種對(duì)象形式寫(xiě)入。后者是更明確的寫(xiě)法。4.5 表格視圖、打印設(shè)置與隱藏列這部分不算坑但用好了很加分。如果報(bào)表打開(kāi)后希望用戶第一眼就看到特定區(qū)域可以用sheet.views配置縮放比例sheet.views [{ zoomScale: 90 }];導(dǎo)出前如果希望隱藏某些輔助列比如ID字段可以設(shè)置列隱藏sheet.getColumn(1).hidden true;打印場(chǎng)景下通過(guò)pageSetup設(shè)置橫向打印、A4紙、縮放比例可以讓報(bào)表打印出來(lái)不帶多余的空白頁(yè)sheet.pageSetup { orientation: landscape, fitToPage: true, fitToWidth: 1, fitToHeight: 1, paperSize: 9 // A4 };這些配置都是元數(shù)據(jù)級(jí)別的不會(huì)影響導(dǎo)出內(nèi)容但對(duì)用戶體驗(yàn)和之后的紙質(zhì)歸檔很有幫助。我一般在通用導(dǎo)出模塊里默認(rèn)把fitToWidth設(shè)置為1這樣無(wú)論多少列打印時(shí)總會(huì)縮到一頁(yè)寬避免打印出來(lái)被切掉大半。5. 導(dǎo)出模塊的整體收益與后續(xù)擴(kuò)展Vue3 ExcelJS這套組合對(duì)我來(lái)說(shuō)最大的收益是真正把導(dǎo)出這個(gè)能力還給了前端。產(chǎn)品提需求、改樣式我直接在組件里改配置一條數(shù)據(jù)流的改動(dòng)幾分鐘重新導(dǎo)出驗(yàn)證整個(gè)迭代效率比之前跨團(tuán)隊(duì)溝通高很多。對(duì)中小型團(tuán)隊(duì)來(lái)說(shuō)沉淀一個(gè)導(dǎo)出模塊能覆蓋絕大多數(shù)報(bào)表頁(yè)面性價(jià)比相當(dāng)高。擴(kuò)展方向也很明確。比如多sheet導(dǎo)出workbook.addWorksheet可以創(chuàng)建多個(gè)工作表每個(gè)sheet里放一組數(shù)據(jù)一鍵生成月度匯總文件。又比如導(dǎo)出帶圖片的報(bào)表workbook.addImage加sheet.addImage就能在指定位置插入Logo、簽名或者數(shù)據(jù)圖片配合editAs參數(shù)控制圖片鎖定于單元格或浮于上方。另一個(gè)常用擴(kuò)展是數(shù)據(jù)校驗(yàn)sheet.dataValidations可以為某列設(shè)置下拉選項(xiàng)這在做模板類導(dǎo)出時(shí)特別有用。我個(gè)人在實(shí)際操作中的體會(huì)是ExcelJS的API設(shè)計(jì)挺貼合Excel本身的邏輯學(xué)習(xí)成本不高真正的難點(diǎn)在細(xì)節(jié)。顏色搞錯(cuò)格式、樣式被覆蓋、日期變序列號(hào)、合并區(qū)域重疊這些坑每個(gè)都會(huì)浪費(fèi)一兩個(gè)小時(shí)。但只要你把這些經(jīng)驗(yàn)固化到統(tǒng)一模塊里后面基本就是一勞永逸。這篇內(nèi)容里涉及的代碼片段我在項(xiàng)目里都反復(fù)用過(guò)組合起來(lái)可以直接搭出一套夠用的導(dǎo)出能力。如果你也正在Vue3項(xiàng)目里搗鼓Excel導(dǎo)出照著這套思路去封裝應(yīng)該能避開(kāi)我踩過(guò)的大部分坑位。