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