样式设置相关函数

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

setExportCellStyle参数配置

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

参数名称 描述 默认值
data sheet级别的数据 undefined
range 范围字符串,比如" A1:C12"表示开始位置默认 A1,结束位置C12,目前还不支持其他格式,请不要写 A~B,1~2等自创写法 数据范围内左上角到右下角
config 批量设置的单元格属性,如果没有回调函数返回则样式合并,存在回调返回则以返回值为准 undefined
filter 回调函数,传递函数生效,返回值作为新的值(可用于过滤、规则替换样式等骚操作)『非必填参数』 undefined
filter入参列表

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

参数名称 描述
cell 原有单元格数据
newCell 根据批量设置规则自动生成样式的单元格数据(合并)
row 所在行数据
config 传入的配置
currentCol 当前列索引
fieldKey 当前字段key
调用样例(更多用法可参考 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 的回调模式之时

参数名称 描述 默认值
data Sheet级别的数据 []
range 范围字符串,如 A1:C12,默认从左上角到右下角 "A1:C12"
config border 上下左右属性配置信息(对角线的三个属性被下放到left/right/top/bottom下) {top: {xxx}, bottom: {}, left: {}, right: {}}
调用样例
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'] 中

参数名称 描述 默认值
origin 二维数组 undefined
调用样例

如下代码表示合并 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']中

参数名称 描述 默认值
data 一个对象,对象的key代表列(如:ABCDE),value代表宽度 null
defaultNum 渲染过程中未指定单元格的默认宽度 60
使用样例

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']中

参数名称 描述 默认值
data 一个对象,对象的key代表从1开始的行(如:1234),value代表高度 null
defaultNum 渲染过程中未指定单元格的默认宽度 60
使用样例

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
    }
});

results matching ""

    No results matching ""