参考：https://github.com/gitbrent/xlsx-js-style/
参考：https://docs.sheetjs.com/
xlsx-js-style简述
简单来说，xlsx-js-style就是 sheetJs + 基本表格样式。sheetJs 分两个版本，一个是Community Edition版，另一个是Pro版，Pro版需要付费使用，xlsx-js-style使用的是CE版，版本号为：0.18.
下载
npm i xlsx-js-style -S
当前版本为（1.2.0）
可能会需要修改源码：\node_modules\xlsx-style\dist\cpexcel.js 807行把 var cpt = require('./cpt' + 'able'); 改成 var cpt = cptable;
引入
// vue项目中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) {
// 数据列
if (!key.includes('!')) {
ws[key].s = {
font: { // 字体设置
sz: 9,
bold: false,
color: {
rgb: '000000'// 十六进制，不带#
}
},
alignment: { // 文字居中
horizontal: 'center',
vertical: 'center',
wrapText: true
},
border: { // 设置边框
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 => {
// 拿到合并单元格区域的第一个单元格
const firstCell = ws[XLSX.utils.encode_cell({r: range.s.r, c:range.s.c})]
// 遍历当前合并区域的所有但愿格
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简介
工具函数
sheetJs提供的工具函数大致可以分为两类：
- 数据包装：把js数据转化成工作表或工作簿（worksheet或者workbook）
- 数据提取：将表格文件中的数据提取出来，生成html（或者csv,text）
aoa_to_sheet 把JS二维数组转换为工作表。
sheet_add_aoa 把JS二维数组中的数据添加到已存在的工作表中。
json_to_sheet 把JS对象数组转换为工作表。
sheet_add_json 把JS对象数组添加到已存在的工作表中。
table_to_sheet 把DOM TABLE元素转换为工作表。
table_to_book 把DOM TABLE元素转换为工作簿。
sheet_add_dom 从DOM TABLE元素中添加数据到已经存在的工作表。
sheet_to_html 通过html元素展示表格。
sheet_to_json 把工作表转换为 JS对象数组。
sheet_to_csv 通过工作表生成csv文件
sheet_to_txt 通过工作表生成text文件
sheet_to_formulae 从表格中提取所有公式
book_append_sheet 添加一个工作表到工作簿中
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 = ['客户', '价格', '数量', '总价', '备注' ]
// 过滤不需要的key
const data = this.contractCompareDetailList.map(
obj => Object.fromEntries(
Object.entries(obj).filter(
(r) => headerArr.includes(r[0])
)
)
);
// 把对象数组转换成工作表，表头顺序按照headerArr的顺序
const ws =XLSX.utils.json_to_sheet(data, { header: headerArr})
// 创建新的工作簿，0.20.1版本的sheetJs可以支持传参，但当前使用的是0.18.5版本，不支持传参
const wb = new XLSX.utils.book_new()
// 把第一行的表头(newHeaderArr )替换成实际需要展示的表头
XLSX.utils.sheet_add_aoa(ws, [newHeaderArr], { origin: "A1" });
// 将生成的工作表添加到新的工作簿里，Sheet1是工作表的名称
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
// 下载工作簿
XLSX.writeFile(wb, "测试.xlsx");
表格样式
style object 包含这些属性：alignment, border, fill, font, numFmt
style_object_property1.png
style_object_property2.png
color_style.png
border_style.png
工作表的稀疏模型（sparse-mode）与紧密模型（dense-mode）
关于稀疏模型，工作表是通过对象的形式保存，对象的key就是每个单元格的位置，形如A1，C4这种形式，所对应的值，就是对应位置的单元格对象。例如：sheet['A4'] = cellObject
紧密模型则是以二维数组的形式保存每个单元格对象，形如：sheet["!data"][R][C] ，其中R和C分别代表从0开始的行索引和列索引。例如：sheet['!data'][0][3] = cellObject
在以前的环境中处理小型工作表时，稀疏工作表比密集工作表更有效。在较新的浏览器中，当处理非常大的工作表时，密集的工作表使用更少的内存，往往更高效。
网友评论