參考：https://github.com/gitbrent/xlsx-js-style/
參考：https://docs.sheetjs.com/
xlsx-js-style簡(jiǎn)述
簡(jiǎn)單來說，xlsx-js-style就是 sheetJs + 基本表格樣式。sheetJs 分兩個(gè)版本，一個(gè)是Community Edition版，另一個(gè)是Pro版，Pro版需要付費(fèi)使用，xlsx-js-style使用的是CE版，版本號(hào)為：0.18.
下載
npm i xlsx-js-style -S
當(dāng)前版本為（1.2.0）
可能會(huì)需要修改源碼：\node_modules\xlsx-style\dist\cpexcel.js 807行把 var cpt = require('./cpt' + 'able'); 改成 var cpt = cptable;
引入
// vue項(xiàng)目中main.js引入
import XLSX from 'xlsx-js-style';
Vue.prototype.$xlsx = XLSX
使用
let wb = this.$xlsx.utils.table_to_book(
document.querySelector("#tableId"),
{ raw: true }
);
// 添加樣式（定義在下方）
this.addStyle(wb.Sheets.Sheet1)
// 下載
this.$xlsx.writeFile(wb, "sheet.xlsx");
addStyle(ws) {
for (const key in ws) {
// 數(shù)據(jù)列
if (!key.includes('!')) {
ws[key].s = {
font: { // 字體設(shè)置
sz: 9,
bold: false,
color: {
rgb: '000000'// 十六進(jìn)制，不帶#
}
},
alignment: { // 文字居中
horizontal: 'center',
vertical: 'center',
wrapText: true
},
border: { // 設(shè)置邊框
top: { style: 'thin' },
bottom: { style: 'thin' },
left: { style: 'thin' },
right: { style: 'thin' }
}
}
if (ws[key].t === 'z' ) {
ws[key].t = 's'
}
}
}
// 給跨行跨列的表格添加邊框
const ranges = ws['!merges']
if (ranges) {
ranges.forEach(range => {
// 拿到合并單元格區(qū)域的第一個(gè)單元格
const firstCell = ws[XLSX.utils.encode_cell({r: range.s.r, c:range.s.c})]
// 遍歷當(dāng)前合并區(qū)域的所有但愿格
for(var R = 0; R <= range.e.r; ++R) {
for(var C = 0; C <= range.e.c; ++C) {
ws[XLSX.utils.encode_cell({r:R, c:C})] = firstCell;
}
}
})
}
}
sheetJs簡(jiǎn)介
工具函數(shù)
sheetJs提供的工具函數(shù)大致可以分為兩類：
- 數(shù)據(jù)包裝：把js數(shù)據(jù)轉(zhuǎn)化成工作表或工作簿（worksheet或者workbook）
- 數(shù)據(jù)提?。簩⒈砀裎募械臄?shù)據(jù)提取出來，生成html（或者csv,text）
aoa_to_sheet 把JS二維數(shù)組轉(zhuǎn)換為工作表。
sheet_add_aoa 把JS二維數(shù)組中的數(shù)據(jù)添加到已存在的工作表中。
json_to_sheet 把JS對(duì)象數(shù)組轉(zhuǎn)換為工作表。
sheet_add_json 把JS對(duì)象數(shù)組添加到已存在的工作表中。
table_to_sheet 把DOM TABLE元素轉(zhuǎn)換為工作表。
table_to_book 把DOM TABLE元素轉(zhuǎn)換為工作簿。
sheet_add_dom 從DOM TABLE元素中添加數(shù)據(jù)到已經(jīng)存在的工作表。
sheet_to_html 通過html元素展示表格。
sheet_to_json 把工作表轉(zhuǎn)換為 JS對(duì)象數(shù)組。
sheet_to_csv 通過工作表生成csv文件
sheet_to_txt 通過工作表生成text文件
sheet_to_formulae 從表格中提取所有公式
book_append_sheet 添加一個(gè)工作表到工作簿中
sheet_set_array_formula 分配數(shù)組公式
table_to_sheet示例
// 生成新的工作簿
var workbook = XLSX.utils.book_new();
// 把Id為 'table1'的表格添加到工作簿中，工作表名為Sheet1
var ws1 = XLSX.utils.table_to_sheet(document.getElementById('table1'));
XLSX.utils.book_append_sheet(workbook, ws1, "Sheet1");
// 把Id為 'table1'的表格添加到工作簿中，工作表名為Sheet2
var ws2 = XLSX.utils.table_to_sheet(document.getElementById('table2'));
XLSX.utils.book_append_sheet(workbook, ws2, "Sheet2");
// 下載表格
XLSX.writeFile(workbook , "sheet.xlsx");
json_to_sheet示例
const headerArr = ['customer', 'price', 'num', 'totalPrice', 'remark' ]
const newHeaderArr = ['客戶', '價(jià)格', '數(shù)量', '總價(jià)', '備注' ]
// 過濾不需要的key
const data = this.contractCompareDetailList.map(
obj => Object.fromEntries(
Object.entries(obj).filter(
(r) => headerArr.includes(r[0])
)
)
);
// 把對(duì)象數(shù)組轉(zhuǎn)換成工作表，表頭順序按照headerArr的順序
const ws =XLSX.utils.json_to_sheet(data, { header: headerArr})
// 創(chuàng)建新的工作簿，0.20.1版本的sheetJs可以支持傳參，但當(dāng)前使用的是0.18.5版本，不支持傳參
const wb = new XLSX.utils.book_new()
// 把第一行的表頭(newHeaderArr )替換成實(shí)際需要展示的表頭
XLSX.utils.sheet_add_aoa(ws, [newHeaderArr], { origin: "A1" });
// 將生成的工作表添加到新的工作簿里，Sheet1是工作表的名稱
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
// 下載工作簿
XLSX.writeFile(wb, "測(cè)試.xlsx");
表格樣式
style object 包含這些屬性：alignment, border, fill, font, numFmt
工作表的稀疏模型（sparse-mode）與緊密模型（dense-mode）
關(guān)于稀疏模型，工作表是通過對(duì)象的形式保存，對(duì)象的key就是每個(gè)單元格的位置，形如A1，C4這種形式，所對(duì)應(yīng)的值，就是對(duì)應(yīng)位置的單元格對(duì)象。例如：sheet['A4'] = cellObject
緊密模型則是以二維數(shù)組的形式保存每個(gè)單元格對(duì)象，形如：sheet["!data"][R][C] ，其中R和C分別代表從0開始的行索引和列索引。例如：sheet['!data'][0][3] = cellObject
在以前的環(huán)境中處理小型工作表時(shí)，稀疏工作表比密集工作表更有效。在較新的瀏覽器中，當(dāng)處理非常大的工作表時(shí)，密集的工作表使用更少的內(nèi)存，往往更高效。
