來源於：
https://blog.csdn.net/FE_dev/article/details/106396416
說明
因為最近需要實現前端導出 excel 文件，並且對導出文件的樣式進行一些修改，比如顏色、字體、合並單元格等，所以我找到了 xlsx-style 這個項目，它可以對導出的 excel 文件進行一些樣式上的修改，這個項目是 SheetJS 的一個分支。其實 SheetJS 也是支持修改導出文件的樣式的，不過是在它的專業版中， SheetJS 分為社區版和專業版的，社區版是開源的，但是卻不支持修改導出文件的樣式，專業版擁有更多的功能，這其中就包括修改樣式，但是如果需要使用專業版，要郵件聯系 SheetJS 的開發者，去咨詢價格，購買它。
下來說說如何使用 xlsx-style ，導出 excel 文件，並修改樣式。
示例：
安裝
瀏覽器：
<script src="dist/xlsx.full.min.js"></script>
1
npm：
npm install xlsx-style --save
1
如果 npm 安裝時出現如下報錯，
需要修改源碼：
1、在\node_modules\xlsx-style\dist\cpexcel.js 807行把 var cpt = require('./cpt' + 'able'); 改成 var cpt = cptable;
2、在\node_modules\xlsx-style\ods.js 10行和13行把路徑改為 require('./xlsx')
bower：
bower install js-xlsx-style#beta
1
單元格對象、工作表對象和工作簿對象解釋
Cell Object
Cell Object 指單元格對象，格式為 {c:C, r:R}，其中 C 代表列號，R 代表行號。
例如單元格 B5 用對象表示就是 {c:1, r:4}。
單元格范圍用對象表示為{s:S, e:E}，其中 S 表示第一個單元格對象，E 表示最后一個單元格對象。
例如單元格范圍 A3:B7 由對象表示就是 {s:{c:0, r:2}, e:{c:1, r:6}}。
在工作表對象中設置一個單元格對象，是以編碼后的單元格為屬性，進行設置。
例如：
//設置A1單元格的值是123，類型是字符串，字體顏色是FF0187FA
worksheet["A1"] = {
v: "123",
t: "s",
s: {
font: {
color: { rgb: "FF0187FA" }
},
}
}
1
2
3
4
5
6
7
8
9
10
v：單元格的值
t：單元格的類型 'b'布爾值、'n'數字、'e'錯誤、's'字符串、'd'日期
s：單元格的樣式
單元格的屬性不止有v、t、s這個三個屬性，還有其他屬性，具體看這里，但是實現導出功能，使用這三個已經足夠了。
在 XLSX.utils 對象中有一些方法可以對單元格和單元格范圍進行轉化。
//編碼行號
XLSX.utils.encode_row(2); //"3"
//解碼行號
XLSX.utils.decode_row("2"); //1
//編碼列標
XLSX.utils.encode_col(2); //"C"
//解碼列標
XLSX.utils.decode_col("A"); //0
//編碼單元格
XLSX.utils.encode_cell({ c: 1, r: 1 }); //"B2"
//解碼單元格
XLSX.utils.decode_cell("B1"); //{c: 1, r: 0}
//編碼單元格范圍
XLSX.utils.encode_range({ s: { c: 1, r: 0 }, e: { c: 2, r: 8 } }); //"B1:C9"
//解碼單元格范圍
XLSX.utils.decode_range("B1:C9"); //{s:{c: 1, r: 0},e: {c: 2, r: 8}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Worksheet Object
Worksheet Object 指工作表對象，這個對象中每個不以!開頭的屬性，都代表一個單元格。
例如 worksheet["A1"] 返回A1單元格對象。
worksheet['!ref']：表示工作表范圍的字符串。
例如：
worksheet['!ref'] = "A1:B5"
1
worksheet['!cols']：存儲列對象的數組，可以在這里設置列寬。
例如：
//wpx 字段表示以像素為單位，wch 字段表示以字符為單位
worksheet['!cols'] = [
{ wpx: 200 }, //設置第1列列寬為200像素
{ wch: 50 }, //設置第2列列寬為50字符
];
1
2
3
4
5
worksheet['!merges']：存儲合並單元格范圍的數組。
例如：
//合並B2到D4范圍內的單元格
worksheet['!merges'] = [
{
s: { c: 1, r: 1 }, //B2
e: { c: 3, r: 3 }, //D4
}
]
1
2
3
4
5
6
7
worksheet['!freeze']：凍結單元格。
例如：
//凍結第一行和第一列：
worksheet['!freeze'] = {
xSplit: "1", //凍結列
ySplit: "1", //凍結行
topLeftCell: "B2", //在未凍結區域的左上角顯示的單元格，默認為第一個未凍結的單元格
state: "frozen"
}
1
2
3
4
5
6
7
以下是打印相關的設置
worksheet['!rowBreaks']：行分頁數組。
例如：
//第一行為一頁，第二行和第三行為一頁，第三行之后為一頁
worksheet['!rowBreaks'] = [1,3]
1
2
worksheet['!colBreaks']：列分頁數組。
例如：
//第一列為一頁，第二列和第三列為一頁，第三列之后為一頁
worksheet['!colBreaks'] = [1,3]
1
2
worksheet['!pageSetup']：設置縮放大小和打印方向的對象。
例如：
//縮放100%，打印方向為縱向
worksheet['!pageSetup'] = {
scale: '100',
orientation: 'portrait'
}
// orientation 取值如下：
// 'portrait' - 縱向
// 'landscape' - 橫向
1
2
3
4
5
6
7
8
worksheet['!printHeader']：需要重復的第一行和最后一行索引的數組，用於分頁時重復打印表頭。
例如：
//分頁時重復打印第一行
worksheet['!printHeader'] = [1,1]
1
2
Workbook Object
Workbook Object 指工作簿對象。
workbook.SheetNames：存儲工作表名稱的數組。
workbook.Sheets：存儲工作表對象的對象。
workbook.Sheets[sheetname]：返回對應名稱的工作表對象。
單元格樣式
設置單元格的樣式，就是設置工作表對象中的單元格對象的 s 屬性。這個屬性的值也是一個對象，它有五個屬性：fill、font、numFmt、alignment和border。
樣式屬性 子屬性 值 描述
fill patternType PatternTypes 圖案樣式
bgColor COLOR_SPEC 背景色，設置填充時的圖案顏色
fgColor COLOR_SPEC 前景色，單元格的背景顏色
font name 表示字體名稱的字符串 字體名稱，默認值是 "Calibri"
sz 表示字號的數字 字號
color COLOR_SPEC 字體顏色
bold true 或 false 加粗
underline true 或 false 下划線
italic true 或 false 傾斜
strike true 或 false 刪除線
vertAlign 'superscript' 或 'subscript' 上標 或 下標
numFmt 字符串或數字 對數字類型的單元格進行格式化
alignment vertical "bottom"、"center" 或 "top" 垂直對齊
horizontal "left"、"center" 或 "right" 水平對齊
wrapText true 或 false 自動換行
readingOrder 0、1 或 2 文字方向
textRotation 數字，0至180 或 255 （默認為0） 文本旋轉角度
45 逆時針旋轉45度
90 逆時針旋轉90度
135 順時針旋轉45度
180 順時針旋轉90度
255 垂直排列
border top { style: BORDER_STYLE, color: COLOR_SPEC } 上邊框樣式
bottom { style: BORDER_STYLE, color: COLOR_SPEC } 下邊框樣式
left { style: BORDER_STYLE, color: COLOR_SPEC } 左邊框樣式
right { style: BORDER_STYLE, color: COLOR_SPEC } 右邊框樣式
diagonal { style: BORDER_STYLE, color: COLOR_SPEC } 對角線樣式
diagonalUp true 或 false 上對角線
diagonalDown true 或 false 下對角線
PatternTypes
PatternTypes 指填充時的圖案樣式，取值如下：
none
solid
darkGray
mediumGray
lightGray
gray125
gray0625
darkHorizontal
darkVertical
darkDown
darkUp
darkGrid
darkTrellis
lightHorizontal
lightVertical
lightDown
lightUp
lightGrid
lightTrellis
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
在 Excel 中點擊單元格，選擇設置單元格格式，點擊填充會出現圖案樣式選項。
COLOR_SPEC
COLOR_SPEC 指設定顏色的對象，取值如下：
{ rgb: "FFFFAA00" } 十六進制ARGB值，這里有一個網頁可以進行顏色值轉換
{ theme: "1"} 主題顏色的整數索引，默認是0。
numFmt
樣式屬性 numFmt 的作用是對數字類型的單元格進行格式化。在 xlsx-style 中內置一個 table_fmt 對象，這個對象存儲了一些進行格式化的規則。
var table_fmt = {
0: 'General',
1: '0',
2: '0.00',
3: '#,##0',
4: '#,##0.00',
9: '0%',
10: '0.00%',
11: '0.00E+00',
12: '# ?/?',
13: '# ??/??',
14: 'm/d/yy',
15: 'd-mmm-yy',
16: 'd-mmm',
17: 'mmm-yy',
18: 'h:mm AM/PM',
19: 'h:mm:ss AM/PM',
20: 'h:mm',
21: 'h:mm:ss',
22: 'm/d/yy h:mm',
37: '#,##0 ;(#,##0)',
38: '#,##0 ;[Red](#,##0)',
39: '#,##0.00;(#,##0.00)',
40: '#,##0.00;[Red](#,##0.00)',
45: 'mm:ss',
46: '[h]:mm:ss',
47: 'mmss.0',
48: '##0.0E+0',
49: '@',
56: '"上午/下午 "hh"時"mm"分"ss"秒 "'
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
numFmt 的取值如下：
1、table_fmt 對象的屬性值。
例如：
worksheet["A1"].s.numFmt = "0.00%";
1
2、table_fmt 對象的屬性名對應的數字。
例如：
worksheet["A1"].s.numFmt = 0;
1
3、Excel 內置規則對應的字符串。
例如：
worksheet["A1"].s.numFmt = "yyyy/m/d h:mm";
1
在 Excel 中對應的操作就是，右鍵單元格，選擇設置單元格格式，選擇自定義，選擇 yyyy/m/d h:mm 類型。
4、如果熟悉 Excel 中的自定義格式，可以使用自定義格式的字符串。
例如：
//單元格輸入1時顯示男，輸入0時顯示女
worksheet["A1"].s.numFmt = '[=1]"男";[=0]"女"';
1
2
在 Excel 中對應的操作就是，右鍵單元格，選擇設置單元格格式，選擇自定義，在類型中輸入 [=1]"男";[=0]"女"。
readingOrder
樣式屬性 alignment 的子屬性 readingOrder 表示單元格的文字方向。語言的閱讀與書寫順序並不都是從左到右的，比如阿拉伯語就是從右到左的。
readingOrder 的取值如下：
0：根據內容決定
1：從左到右
2：從右到左
在 Excel 中對應的操作就是，右鍵單元格，選擇設置單元格格式，在對齊選項中設置文字方向。
BORDER_STYLE
BORDER_STYLE 是用來設置邊框樣式的一個字符串，可用取值如下：
thin
medium
thick
dotted
hair
dashed
mediumDashed
dashDot
mediumDashDot
dashDotDot
mediumDashDotDot
slantDashDot
double
合並單元格的邊框是合並區域內的每個單元格指定的。因此，如果需要設置3x3單元格合並后的單元格邊框，需要為8個不同的單元格設置邊框：
左側單元格的左邊框
右側單元格的右邊框
頂部單元格的上邊框
底部單元格的下邊框
導出文件
xlsx-style 有兩個輸出數據的方法 write 和 writeFile 方法，需要注意的是 writeFile 方法需要基於 node 環境才可以使用。
XLSX.write(workbook, wopts);
XLSX.writeFile(workbook, filename, wopts);
1
2
filename：
writeFile 方法需要傳入 filename 參數，也就是要創建文件的名稱，也可以是路徑。
例如：
XLSX.writeFile(workbook, "out.xlsx", wopts);
XLSX.writeFile(workbook, "./folder/out.xlsx", wopts);
1
2
wopts：
屬性名 默認值 描述
type 輸出數據類型（請參見下面的輸出類型）
cellDates false 將日期存儲為類型'd'(默認為'n')
bookSST false 是否生成共享字符串表
bookType 'xlsx' 工作簿的類型(xlsx、xlsm 或 xlsb)
showGridLines true 是否顯示網格線
Props null 工作簿的屬性
type：
值 描述
"base64" Base64編碼
"binary" 二進制字符串
"buffer" nodejs 緩沖區
"file" 直接創建文件（node 環境下有效）
如果使用 write 方法需要設置 type 屬性，而且如果設置 type 屬性為 file，還需要在 wopts 參數中增加一個 file 屬性，值是要創建文件的路徑。
如果使用 writeFile 方法不需要設置 type 屬性，因為在 xlsx-style 的源碼中已經將 type 屬性設置為 file 了， 而且使用這個方法，也不需要在 wopts 參數中設置 bookType 屬性，因為 bookType 是通過第二個參數 filename 來判斷的。
bookSST：
bookSST 設置為 true 時會生成共享字符串表。
SST 指共享字符串表，一個工作簿可能有成千上萬個包含字符串（非數字）數據的單元格。而這些單元格中可能有許多重復數據。實現共享字符串表是為了通過僅讀取和寫入重復數據一次來提高打開和保存文件的性能。
更詳情的解釋可以參閱以下內容：
Working with the shared string table (Open XML SDK)
Exporting to excel using xlsx library and SST
Props：
Props 可以設置為一個對象，存入以下與工作簿相關的信息：
屬性名 描述
"title" 標題
"subject" 主題
"creator" 創建者
"keywords" 關鍵字
"description" 描述
設置這些屬性后，在 Excel 中點擊文件，選擇信息，然后點擊屬性，然后再點擊高級屬性，最后選擇摘要就可以看到了。
使用 write 方法實現下載：
var wopts = { bookType: 'xlsx', type: 'binary' };
var wbout = XLSX.write(workbook, wopts);
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
function saveAs(obj, filename) {
var link = document.createElement("a");
link.download = filename;
link.href = URL.createObjectURL(obj);
link.click();
URL.revokeObjectURL(obj);
}
saveAs(blob, "out.xlsx");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
原理就是，把 write 方法輸出的數據，用 s2ab 方法轉為 Uint8Array 對象，然后通過 new Blob 再得到一個 Blob 對象，再通過 URL.createObjectURL 方法將 Blob 對象 作為參數，得到一個對象URL，最后把對象URL設置為臨時的一個 a 鏈接的 href 屬性值，實現下載功能。
使用 writeFile 方法實現下載：
XLSX.writeFile(workbook, "out.xlsx");
1
雖然看上去使用 writeFile 方法要比 write 方法簡單很多，但是要注意 writeFile 方法只能在 node 環境下使用。
總結
前端導出 excel 文件，並修改導出文件樣式的功能最重要的就是准備好符合結構的工作簿對象（Workbook Object），在這個步驟設定好要導出文件的樣式，而后面的步驟都是固定的函數，就比較簡單了。
文中 Excel 相關的截圖，均是在 Microsoft Excel 2016 版截取的，不同版本的 Excel 顯示可能稍有不同。
如果你覺得 xlsx-style 的功能還不夠全面，不能實現你需求，這里再推薦一個項目 ExcelJS，這個項目的功能更加全面，而且項目也還在維護，可以試試看能否滿足需求。
————————————————
版權聲明：本文為CSDN博主「FEWY」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/FE_dev/article/details/106396416