javascript 导出excel表

1、使用 xlsx-js-style工具（基于SheetJS ）

地址： https://github.com/gitbrent/xlsx-js-style/

2、使用方法

引入：

<!--引入xlsx-->
<script type="text/javascript" src="./assets/common/libs/xlsx/xlsx.min.js"></script>

示例：

/**【自定义导出档案表】**/
    // 导出excel方法
    function exportExcel(dataList) {
        // 1. 先判断数据是否存在
        if(!dataList || dataList.length === 0){
            Feng.error("暂无导出数据!",err);
            return;
        }
        /**
         * 2. 对象数组转二维AOA
         * 示例：[{name:"张三",age:28}, {name:"李四",age:32}] 转换成 [["姓名","年龄"],["张三",28],["李四",32]]
         */
        var header = ["文件名称","文件描述","文件类型","成果目录名称","成果目录说明", "归档人",
                    "编制单位", "流程编码","流程名称","硬盘编码","硬盘描述","硬盘sn码"];

        var aoaData = [header];
        dataList.forEach(item => {
            aoaData.push([item.文件名称, item.文件描述, item.文件类型, item.成果目录名称, item.成果目录说明, item.归档人,
                item.编制单位, item.流程编码, item.流程名称,  item.硬盘编码, item.硬盘描述, item.硬盘sn码]);
        });

        // 3. 创建工作表（格式合法，不再报错）
        var ws = XLSX.utils.aoa_to_sheet(aoaData);

        // ========== 样式逻辑 ==========
        var headerStyle = {
            font: { bold: true, sz: 12, color: { rgb: '000000' } },
            fill: { fgColor: { rgb: 'CCCCCC' } },
            alignment: { horizontal: 'center', vertical: 'center' }
        };
        var range = XLSX.utils.decode_range(ws['!ref']);
        // 循环所有单元格设置样式
        for (var r = range.s.r; r <= range.e.r; r++) {
            for (var c = range.s.c; c <= range.e.c; c++) {
                const cellAddress = XLSX.utils.encode_cell({ r, c });
                if (!ws[cellAddress]) {
                    // 空单元格也要创建，否则无法显示边框
                    ws[cellAddress] = { v: '' };
                }
                // 第一行=表头
                if (r === 0) {
                    ws[cellAddress].s = createTitleCellStyle();
                } else {
                    ws[cellAddress].s = createContentCellStyle();
                }
            }
        }
        // 列宽
        ws['!cols'] = [{wch:20},{wch:20},{wch:20},{wch:20},{wch:20},{wch:20},{wch:20},{wch:20},{wch:20},{wch:20},{wch:20},{wch:20}];

        // 导出
        var wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "档案表");
        XLSX.writeFile(wb, "档案表.xlsx");
    }
    // 导出数据请求
    $('#btnExport').click(function () {
        // 请求数据
        var excelUrl = Feng.ctxPath + "/chjArchiveResultslist/excel/list";
        $.ajax({
            url: excelUrl,
            type:"get",
            dataType:"json",
            contentType: "application/json",
            success:function(res){
                if("200" == res.code){
                    console.log("档案表查询：",res);
                    // 示例数据源
                    // var data = [
                    //         { id: 1, name: "张三", phone: "13800138000" },
                    //         { id: 2, name: "李四", phone: "13900139000" }
                    //     ];

                    // 调用导出excel表方法
                    exportExcel(res.data, "档案表");
                }
            },error:function(err){
                Feng.error("档案表查询失败!",err);
            }
        });
    });

    // 表头样式：加粗、居中、边框、灰色背景
    function createTitleCellStyle() {
        return {
            font: { bold: true },
            alignment: { horizontal: 'center', vertical: 'center' },
            fill: { fgColor: { rgb: 'FFDCDCDC' } },
            border: {
                top: { style: 'thin' },
                bottom: { style: 'thin' },
                left: { style: 'thin' },
                right: { style: 'thin' }
            }
        }
    }

    // 内容单元格样式：居中、边框
    function createContentCellStyle() {
        return {
            alignment: { horizontal: 'center', vertical: 'center' },
            border: {
                top: { style: 'thin' },
                bottom: { style: 'thin' },
                left: { style: 'thin' },
                right: { style: 'thin' }
            }
        }
    }