1. 基础配置

1.1 单元格内容

注：xlsx、xlsx-style 都存在 write 方法，xlsx 设置单元格样式没有效果，xlsx-style 设置行高没有效果

// 首选需要安装 npm i xlsx xlsx-style
imoprt XLSX from "xlsx"let arr = [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",}
];// 处理成 XLSX 认识的格式
XLSX.utils.json_to_sheet(arr);
/** 可以看到自动把 key 变为第一行的标题了，value 依此排列* { // 这里的对象也可以手动自行配置*     "!ref": "A1:C3", // 表示表格内容范围A1: { t: "s", v: "date" }, // t: 格式  v: 内容A2: { t: "s", v: "2016-05-02" },A3: { t: "s", v: "2016-05-04" },B1: { t: "s", v: "name" },B2: { t: "s", v: "王小虎" },B3: { t: "s", v: "王小虎" },C1: { t: "s", v: "address" },C2: { t: "s", v: "上海市普陀区金沙江路 1518 弄" },C3: { t: "s", v: "上海市普陀区金沙江路 1517 弄" }}*/

1.2 单元格合并、列宽、行高

let worksheet = {"!cols": [{ wpx: 140 }, { wpx: 80 }],"!rows": [{ hpx: 14 }, { hpx: 14 }],"!ref": "A1:C3","!merges": [{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }] // 合并第一行的 1~3 列
}

1.3 单元格样式

let cell = {t: "s",v: "测试"，s: {alignment: {vertical: "center", // 垂直居中horizontal: "center", // 水平居中wrapText: "true", // 文本换行readingOrder: "2", // 阅读顺序，从右往左textRotation: "180" // 文本旋转},border: {top: { style: "边框样式", color: { rgb: "边框颜色" }}bottom: {}...},font: {name: "字体", sz: "字体大小",color: { rgb: "字体颜色" },bold: "是否加粗"},fill: {bgColor: { rgb: "背景颜色" }}}
}

2. sheet 配置、多个 sheet

import XLSX from "xlsx" // 只能使用 xlsx
const wb = XLSX.utils.book_new(); // 创建工作簿
const sheet1 = XLSX.utils.json_to_sheet(arr1)
const sheet2 = XLSX.utils.json_to_sheet(arr2)
XLSX.utils.book_append_sheet(wb1, sheet, 'sheet1名称');
XLSX.utils.book_append_sheet(wb2, sheet, 'sheet2名称');
// 这个时候的 wb 的数据就完整了

3. excel 导出

// 将 workbook 装化成 blob 对象
// 这里用到了 XLSX.write，注意是使用的哪种 import XLSX from "xlsx"/"xlsx-style"
function workbook2blob(workbook) {// 生成excel的配置项var wopts = {// 要生成的文件类型bookType: "xlsx",// 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性bookSST: false,type: "binary",};var wbout = XLSX.write(workbook, wopts);// 将字符串转 ArrayBufferfunction 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",});return blob;
}// 将 blob 对象创建 bloburl，然后用 a 标签实现弹出下载框
function openDownloadDialog(blob, fileName) {if (typeof blob == "object" && blob instanceof Blob) {blob = URL.createObjectURL(blob); // 创建blob地址}var aLink = document.createElement("a");aLink.href = blob;// HTML5 新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效aLink.download = fileName || "";var event;if (window.MouseEvent) event = new MouseEvent("click");// 移动端else {event = document.createEvent("MouseEvents");event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);}aLink.dispatchEvent(event);
}openDownloadDialog(workbook2blob(wb), "excel下载.xlsx");

4. 数据插入（进阶）

// 数据的更新（插入行，向下平移）
// 插入指定行同理 修改循环时的初始值就好了
function insertRowsBeforeData(worksheet, rowLen = 1, callback) {// 获取当前工作表范围const range = worksheet["!ref"] ? XLSX.utils.decode_range(worksheet["!ref"]) : null;// 计算要插入的行数const insertRows = rowLen;// 处理合并单元格 - 下移现有合并区域if (worksheet["!merges"]) {worksheet["!merges"] = worksheet["!merges"].map((merge) => {const newMerge = { ...merge };// 移动合并区域的起始行和结束行newMerge.s.r += insertRows;newMerge.e.r += insertRows;return newMerge;});}//  处理数据，下移现有数据if (range) {// 从最后一行开始向上移动，避免覆盖for (let row = range.e.r; row >= range.s.r; row--) {for (let col = range.s.c; col <= range.e.c; col++) {const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });if (worksheet[cellAddress]) {// 计算新位置（向下移动insertRows行）const newRow = row + insertRows;const newAddress = XLSX.utils.encode_cell({ r: newRow, c: col });// 移动单元格worksheet[newAddress] = worksheet[cellAddress];// 删除原始位置的单元格delete worksheet[cellAddress];}}}// 更新工作表范围range.e.r += insertRows;worksheet["!ref"] = XLSX.utils.encode_range(range);}// 插入数据callback && callback();
}this.insertRowsBeforeData(worksheet, 1, () => {worksheet.A1 = { t: "s", v: "我是新插入的数据1" }worksheet.B1 = { t: "s", v: "我是新插入的数据2" }
});