excel.js、xlsx、xlsx-style 的配置及导出（分享）

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);
    // 将字符串转 ArrayBuffer
    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",
    });
    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" }
});