一、前期準備

npm install xlsx-style將插件導入項目

注意：直接使用npm install xlsx-style可能會報錯，因為這個東西很久沒有維護了報錯解決方案的話網上有很多可以找一下，因為今天我們用的是她的升級版，無需解決報錯
改進后的xlsx-style發布到npm上啦！安裝命令npm install xlsx-style-medalsoft（感謝大佬 一杠(封裝組件的大佬)）
大家要看封裝過程可以查看https://juejin.cn/post/6903820868859002888#heading-7

二、導出excel以及樣式修改

let wb = XLSX.utils.book_new();//導出輸出表頭設置let headers = {acceptCode: "驗收單編號",acceptName: "驗收單名稱",acceptType: "驗收類型",supplierName: "供應商名稱",acceptTargetCode: "合同編碼",acceptTargetName: "合同名稱",contractType: "合同類型",};// 將表頭放入數據源前面this.contractTableData.unshift(headers);let contentWs = XLSX.utils.json_to_sheet(this.contractTableData, {//表頭對應字段設置header: ["acceptCode","acceptName","acceptType","supplierName","acceptTargetCode","acceptTargetName","contractType",], //可自定義表頭順序skipHeader: true, // 是否忽略表頭,默認為falseorigin: "A2",//表頭起始行，默認從'A1'開始，也就是Excel左上角第一個表格});// 單獨設置某個單元格內容contentWs["A1"] = {t: "s",v: "人員名單",//單元格文字// 自定義樣式s: {font: {name: "宋體",sz: 40,bold: true,color: { rgb: "FFFFAA00" },},//設置更多樣式可參考下圖alignment: {horizontal: "center",vertical: "center",},fill: { bgcolor: { rgb: "ffff00" } },},};// // 設置單元格合并 !merges 為一個對象數組,每個對象設定了單元格合并的規則,// {s:{ r: 0, c: 0}, e: { r: 0, c: 2}} 為一個規則, s: 起始位置, e: 結束位置, r: 行, c: 列contentWs["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 7 } }];XLSX.utils.book_append_sheet(wb, contentWs, "Sheet1");let wbout = XLSXS.write(wb, {type: "buffer",});// // 下載FileSaver.saveAs(new Blob([wbout]),// // 設置導出文件名稱"XXXX人員表" + ".xlsx");

樣式參考圖
單元格樣式
設置單元格的樣式，就是設置工作表對象中的單元格對象的 s 屬性。這個屬性的值也是一個對象，它有五個屬性：fill、font、numFmt、alignment和border。

三、拓展

針對導出表格自定義樣式等基本用法上面應該夠用了，如果有更復雜更豐富的需求，可以參考https://zhuanlan.zhihu.com/p/257845606 文章作者：慕課網

總結

以上是生活随笔為你收集整理的Vue导出excel表格设置样式的解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。