來源於：
https://blog.csdn.net/zhai_865327/article/details/118114517
主要是參考
https://www.npmjs.com/package/xlsx-style
https://github.com/protobi/js-xlsx/tree/beta
------------------------分割線--------------------
一、先看實現后的圖
二、技術
這個表格主要采用了 xlsx-style 來實現
https://www.npmjs.com/package/xlsx-style
https://github.com/protobi/js-xlsx/tree/beta
三、入門
由於 npm 和 git 上的文檔都是英文，看過一遍之后就不想再看了，所以這里做一個記錄。
xlsx-style 是一個純 javascript 實現的讀取和生成 excel 的 npm 包。
xlsx-style 來源於 SheetJs/xlsx，並在其非付費版上添加了很多功能，其中最主要的功能是設置 excel 的樣式。
PS: 土豪就不用看了，直接使用 SheetJs/xlsx 的付費版 : )
如果大家在使用過程中有任何問題，可以去這里看看或者提交。
1、支持的文件類型
支持讀取的文件類型
Excel 2007+ XML Formats (XLSX/XLSM)
Excel 2007+ Binary Format (XLSB)
Excel 2003-2004 XML Format (XML “SpreadsheetML”)
Excel 97-2004 (XLS BIFF8)
Excel 5.0/95 (XLS BIFF5)
OpenDocument Spreadsheet (ODS)
支持生成的文件類型
XLSX
CSV (and general DSV)
JSON and JS objects (various styles)
2、兼容
支持 ES5 的瀏覽器，如果是比較老的瀏覽器，需要引入 polyfill
3、安裝
npm安裝：
npm install xlsx-style --save
瀏覽器中使用：
<script lang="javascript" src="dist/xlsx.core.min.js"></script> // 只有核心包
<script lang="javascript" src="dist/xlsx.full.min.js"></script> // 包括依賴包
CDN直接引入：
http://cdnjs.com/libraries/xlsx
4、讀取文件
在 node 中使用
if(typeof require !== 'undefined')
XLSX = require('xlsx')
var workbook = XLSX.readFile('test.xlsx');
/* DO SOMETHING WITH workbook HERE */
1
2
3
4
5
ajax 獲取 excel
var url = "test_files/formula_stress_test_ajax.xlsx";
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
oReq.onload = function(e) {
var arraybuffer = oReq.response;
var data = new Uint8Array(arraybuffer);
var arr = new Array();
for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
var workbook = XLSX.read(bstr, {type:"binary"});
/* DO SOMETHING WITH workbook HERE */
}
oReq.send();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
H5 拖拽上傳
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
var i, f;
for (i = 0, f = files[i]; i != files.length; ++i) {
var reader = new FileReader();
var name = f.name;
reader.onload = function(e) {
var data = e.target.result;
/* if binary string, read with type 'binary' */
var workbook = XLSX.read(data, {type: 'binary'});
/* DO SOMETHING WITH workbook HERE */
};
reader.readAsBinaryString(f);
}
}
drop_dom_element.addEventListener('drop', handleDrop, false);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
H5 input 上傳
function handleFile(e) {
var files = e.target.files;
var i, f;
for (i = 0, f = files[i]; i != files.length; ++i) {
var reader = new FileReader();
var name = f.name;
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
/* DO SOMETHING WITH workbook HERE */
};
reader.readAsBinaryString(f);
}
}
input_dom_element.addEventListener('change', handleFile, false);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
⚠️
XLSX.read(data, read_opts) 是用來解析一段數據.
XLSX.readFile(filename, read_opts) 會從一個文件中解析一段數據.
4.1 read_opts
read_opts 是讀取 excel 的選項，其可選的配置有如下幾項：
key 描述 默認值
cellFormula 將公式保存到 .f 字段上 true
cellHTML 解析富文本並將 HTML 保存到 .h 字段 true
cellNF 將數字格式的字符串保存到 .z 字段 false
cellStyles 將樣式/主題信息保存到 .s 字段 false
cellDates 將日期存儲為類型 d（默認類型為 n） false
sheetStubs 為存根單元創建單元格對象 false
sheetRows 如果 >0，則讀取第一個 sheetRows 行 0
bookDeps 如果為真，解析計算鏈 false
bookFiles 如果為 true，則將原始文件添加到 book object false
bookProps 如果為 true，則僅解析以獲取書籍元數據 false
bookSheets 如果為 true，則僅解析足以獲取工作表名稱 false
bookVBA 如果為 true，則將 vbaProject.bin 暴露給 vbaraw 字段 false
password 如果已定義且文件已加密，則保存密碼 -
這里有一些需要注意的點不是很好翻譯，為了避免歧義，我將原文放在下面
5、寫入文件
在 node 中使用
if(typeof require !== 'undefined')
XLSX = require('xlsx')
XLSX.writeFile(workbook, 'out.xlsx');
1
2
3
利用 FileSaver.js 寫入 binary
/* bookType can be 'xlsx' or 'xlsm' or 'xlsb' */
var wopts = { bookType:'xlsx', bookSST:false, 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;
}
/* saveAs 函數會在本地機器上下載一個文件 */
saveAs(new Blob([s2ab(wbout)],{type:""}), "test.xlsx")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
⚠️
XLSX.write(data, read_opts) 用來寫一份 workbook.
XLSX.writeFile(filename, read_opts) 會將 workbook 寫入文件.
6、單元格對象
在 excel 中，每一個單元格可以看作一個對象，用戶可以填充原始數據，設置文本類型，背景色，邊框，甚至可以繪圖，使用富文本，數學公式，以及指定與其他單元格的關聯等。
單元格的地址可以用 {c:C, r:R}來表示，其中 C 代表第幾列，R代表第幾行
假如我們選擇 B5 這個單元格，該怎么表示呢？
{c:1, r:4} //第一列第四行
這是因為列和行默認都從 0 開始計數，而 A、B、C、D…Z… 字母占據了第 0 行 ，1、2、3、4…則占據了第 0 列
6.1 單元格屬性
屬性 描述
v 原始數據
w 格式化的文本
t 單元格文本類型：b Boolean, n Number, e Error, s String, d Date
f 公式
r 富文本編碼
h 富文本的HTML
c 與單元格關聯的注釋
z 與單元格關聯的數字格式的字符串（已廢棄）
l 單元格超鏈接，.Target holds link, .tooltip is tooltip
s 單元格具體的樣式設置
⚠️：默認的導出（比如導出csv）讀取的是 w ，如果想更改值，可以在導出前delete cell.w或者cell.w=undefined
6.2 單元格樣式
上一節中說到cell.s用來設置單元格的樣式。
在 xlsx-style 中，單元格樣式共有五個頂級的屬性，分別是：fill, font, numFmt, alignment 和 border。
頂級屬性 子屬性 描述 類型或可選值 默認值
fill patternType 填充模式 “solid” or “none” -
fgColor 前景色 COLOR_SPEC -
bgColor 背景色 COLOR_SPEC { indexed: 64}
font name 字體名稱 string “Calibri”
sz 字體大小 number 12
color 字體顏色 COLOR_SPEC -
bold 加粗 boolean -
underline 下划線 boolean -
italic 斜體 boolean -
strike 瞄邊 boolean -
outline 輪廓 boolean -
shadow 陰影 boolean -
vertAlign 垂直對齊 boolean -
numFmt - 數字格式化 “0” // 內置格式的整數索引
"0.00%" // 匹配內置格式的字符串，見下文
"0.0%" // 格式化為自定義格式的字符串
"0.00%;0.000.00;\-;@" // 格式化的時候轉義特殊字符
"m/dd/yy" // 格式化為日期 -
alignment vertical 垂直對齊 “bottom”、“center”、“top” -
horizontal 水平對齊 “left”、“center”、“right” -
wrapText 換行 boolean -
readingOrder 文字方向 1、2 // for right-to-left -
textRotation 旋轉 Number from 0 to 180 or 255 0
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 上對角線 boolean -
diagonalDown 下對角線 boolean -
6.2.1 COLOR_SPEC
COLOR_SPEC用於實現字體、邊框以及填充的顏色，可以選擇以下幾種寫法：
{ auto: 1} // 指定自動值
{ rgb: “FFFFAA00” } // 指定十六進制 ARGB 值
{ theme: “1”, tint: “-0.25”} 指定主題顏色的整數索引和色調值 (默認為 0)
{ indexed: 64} // fill.bgColor 的默認值
6.2.2 BORDER_STYLE
border_style 用於指定邊框的樣式，excel中邊框樣式有很多種，其中的可選值為：
thin
medium
thick
dotted
hair
dashed
mediumDashed
dashDot
mediumDashDot
dashDotDot
mediumDashDotDot
slantDashDot
6.2.3 numFmt 的內置選項
代碼里內置了一些格式化選項，用戶可以通過索引，或者值的形式來選定
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"秒 "',
65535: 'General'
};
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
32
7、Worksheet 對象
Worksheet對象指代當前的 excel 表，其中包含了一些當前表的設置選項，比如：合並單元格、渲染區域、列寬、打印頭等信息。
Worksheet 對象的所有屬性都要以 !開頭
key 描述 示例
!ref excel的渲染區域 “A1: E12”
!cols 設置列寬 [{hpx: 40}]
!rows 設置行高 [{hpx: 40}]
!merges 合並單元格 {s:{c:0, r:2}, e:{c:1, r:6}}
!printHeader 打印的時候要重復的行，比如 table 的表頭信息 [1:1] // 重復第一行
頁眉頁腳以及分頁在文檔上沒有看到相關的信息, 可能目前還不支持。
后續如果有任何補充，我會及時更新
四、demo
github 上的 xlsx-style 如果不支持設置行高，或者需要 demo 代碼的請到這里下載。
————————————————
版權聲明：本文為CSDN博主「zhai_865327」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/zhai_865327/article/details/118114517