样式设置相关函数

样式设置包括，给表格设置边框，添加背景色，添加图片，改字号，文字局中，设置行高列宽，合并单元格等功能，开发了诸如 setExportCellStyle 辅助添加样式，setRoundBorder 用于调整边框等，makeRowConf 调整行高，makeColConf 调整列宽，makeMergeConf 处理合并。

setExportCellStyle 参数配置

辅助方法：为 sheet 级别的数据批量设置单元格属性，请一定注意第一个参数要经过 filter 函数的处理，保证 key 的顺序和完整，如果传入第四个参数（回调函数），单元格数据将会以回调函数返回的数据为准

filter入参列表

此参数选填，如果不传入则直接按照规则覆盖

调用样例(更多用法可参考 index.js 中的样例)

如果想动态的传入范围 A1:C{数据长度}，可以将第二个参数改为 'A1:C'+data.length

// 1. 假设的梳理后的后台的数据(省略filter函数梳理)
var data = [
    { username: '520',sex: '男', city: 'J', 'score': 100, 'start': '2019-03-11' },
    { username: '520',sex: '女', city: 'X', 'score': 100, 'start': '2019-03-11' },
    { username: '520',sex: '男', city: '上海', 'score': 100, 'start': '2019-03-11' }
];
// 2. 调用设置样式的函数，传入设置的范围，支持回调
excel.setExportCellStyle(data, 'A1:C3', {
    s: {
        fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FF0000" } },
        alignment: {
            horizontal: 'center',
            vertical: 'center'
        }
    }
}, function(cell, newCell, row, config, currentRow, currentCol, fieldKey) {
    // 回调参数，cell:原有数据，newCell:根据批量设置规则自动生成的样式，row:所在行数据，config:传入的配置,currentRow:当前行索引,currentCol:当前列索引，fieldKey:当前字段索引
    return ((currentRow + currentCol) % 2 === 0) ? newCell : cell;// 隔行隔列上色
} );
// 3. 导出数据
excel.exportExcel(data, '批量设置样式.xlsx', 'xlsx');

setRoundBorder 参数配置

辅助方法：设置范围内环绕的边框

【注】此方法底层与 setExportCellStyle 方法一致，所以在两个方法混合调用下可能会导致样式覆盖，特别是在使用 setExportCellStyle 的回调模式之时

调用样例

LAY_EXCEL.setRoundBorder(list, 'A1:C2', {
    top: {style: 'thick', color: {rgb: 'FFFF0000'}},
    bottom: {style: 'thick', color: {rgb: 'FFFF0000'}},
    left: {style: 'thick', color: {rgb: 'FFFF0000'}},
    right: {style: 'thick', color: {rgb: 'FFFF0000'}}
});

makeMergeConfig 参数配置

辅助方法：用于生成合并表格的配置项，注意需要传入到 exportExcel 的 opt.extend['!merge'] 中

调用样例

如下代码表示合并 A1~E1 行，并且合并 A2~D4行，如果有动态合并列的需求，请使用 JS 循环生成参数传入

var mergeConf = excel.makeMergeConfig([
    ['A1', 'E1'],
    ['A2', 'D4']
]);
excel.exportExcel({
    sheet1: data
}, '测试导出复杂表头.xlsx', 'xlsx', {
    extend: {
        // 需传入生成好的配置信息
        '!merges': mergeConf
    }
});

makeColConfig 参数配置

辅助方法：生成列宽配置，返回结果需放置于opt.extend['!cols']中

使用样例

key表示列，value表示宽，配置最小列和最大列之间未定义的列宽取配置的默认值，特别注意要放在 opt.extend['!cols'] 中 这里非常感谢群里的『小星球🦏』同学，非常细致的找出了行高列宽的单位错误

// 意思是：A列40，B列80(被设置默认列宽)，C列120px，D、E、F等均未定义（表格默认列宽，非 80），单位是磅
var colConf = excel.makeColConfig({
    'A': 40,
    'C': 120
}, 80);
excel.exportExcel({
    sheet1: data
}, '测试导出复杂表头.xlsx', 'xlsx', {
    extend: {
        '!cols': colConf
    }
});

makeRowConfig 参数配置

辅助方法：生成列宽配置，返回结果需放置于opt.extend['!rows']中

使用样例

key表示行，value表示高度，配置最小行和最大行之间未定义的行高取配置的默认值，特别注意要放在 opt.extend['!rows'] 中

// 意思是：1行40，2行80(被设置了默认列宽)，3行120px，4/5/6/7等行均未定义（表格默认行宽，非80），1大约对应 1.1磅，由底层控制了，并未在上层封装的时候更改其单位
var rowConf = excel.makeRowConfig({
    1: 40,
    3: 120
}, 80);
excel.exportExcel({
    sheet1: data
}, '测试导出复杂表头.xlsx', 'xlsx', {
    extend: {
        '!rows': rowConf
    }
});

imageUrlToBase64 参数配置

辅助方法：下载图片并转换为 base64，返回结果需放置于 opt.extend['!images'] 中

使用样例

注意，其中 splitPosition(pos: string) 函数一如其名，用于快速生成单元格位置配置

// 这一段是模拟生成数据，结构是： [{id: "", username: "", city: "", picture: ""}]
const data = new Array(5).fill({}).map((_, idx) => {
    return {
        id: idx,
        username: `name${idx}`,
        city: `城市${idx}`,
        picture:
        "https://img0.baidu.com/it/u=1588905690,3738625613&fm=253&fmt=auto&app=120&f=JPEG?w=801&h=500",
    };
});
// 这一段代码是异步请求图片的示例，如果本身能够拿到图片 base64，则无需这个步骤
const asyncConcurrencyTask = [];
for (let index = 0; index < data.length; index++) {
    asyncConcurrencyTask.push(
        new Promise((resolve, reject) => {
        excel
            .imageUrlToBase64(data[index].picture, "jpg")
            .then((val) => {
            pictures.push(val.split(",")[1]);
            // 注意：如果不希望表格中出现实际地址，可以在循环中驱除
            data[index].picture = ""
            resolve();
            });
        })
    );
}
await Promise.allSettled(asyncConcurrencyTask);
// 下面是导出部分
excel.exportExcel({
    sheet1: data
}, '测试导出复杂表头.xlsx', 'xlsx', {
    extend: {
        sheet1: {
            "!images": [
            //需要为每个图片设置位置, 可根据需求动态生成图片位置（拼接字符串）, 此处仅演示用法
            {
                name: "image1.jpg",
                data: pictures[0],
                opts: { base64: true },
                position: {
                type: "twoCellAnchor",
                attrs: { editAs: "oneCell" },
                from: excel.splitPosition("D2"),
                to: excel.splitPosition("E3"),
                },
            },
            {
                name: "image2.jpg",
                data: pictures[1],
                opts: { base64: true },
                position: {
                type: "twoCellAnchor",
                attrs: { editAs: "oneCell" },
                from: excel.splitPosition("D3"),
                to: excel.splitPosition("E4"),
                },
            }
            ]
        }
    }
});