Fork me on GitHub

antd design 中表格数据导出为excel(支持多表头)

在之前的项目中遇到一个需求,需要支持将antd design 中表格数据(多表头)导出到excel,看了网上的例子很少,这里就记录一下。

  • 主要用到了better-xlsxfile-saver两个库

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    import { File } from 'better-xlsx';
    import { saveAs } from 'file-saver';

    function ExportExcel(column, dataSource, fileName = 'example') {
    // 新建工作谱
    const file = new File();
    // 新建表
    let sheet = file.addSheet('sheet-test');
    // 获取表头行数
    let depth = getDepth(column);
    // 获取表头的列数
    let columnNum = getColumns(column);
    // 新建表头行数
    let rowArr = [];
    for (let k = 0; k < depth; k++) {
    rowArr.push(sheet.addRow());
    }
    // 根据列数填充单元格
    rowArr.map(ele => {
    for (let j = 0; j < columnNum; j++) {
    let cell = ele.addCell();
    cell.value = j;
    }
    });
    // 初始化表头
    init(column, 0, 0);
    // 按顺序展平column
    let columnLineArr = [];
    columnLine(column);
    // 根据column,将dataSource里面的数据排序,并且转化为二维数组
    let dataSourceArr = [];
    dataSource.map(ele => {
    let dataTemp = [];
    columnLineArr.map(item => {
    dataTemp.push({
    [item.dataIndex]: ele[item.dataIndex],
    value: ele[item.dataIndex],
    });
    });
    dataSourceArr.push(dataTemp);
    });
    // debugger;
    // 绘画表格数据
    dataSourceArr.forEach((item, index) => {
    //根据数据,创建对应个数的行
    let row = sheet.addRow();
    row.setHeightCM(0.8);
    //创建对应个数的单元格
    item.map(ele => {
    let cell = row.addCell();
    if (ele.hasOwnProperty('num')) {
    cell.value = index + 1;
    } else {
    cell.value = ele.value;
    }
    cell.style.align.v = 'center';
    cell.style.align.h = 'center';
    });
    });
    //设置每列的宽度
    for (var i = 0; i < 4; i++) {
    sheet.col(i).width = 20;
    }
    file.saveAs('blob').then(function(content) {
    saveAs(content, fileName + '.xlsx');
    });

    // 按顺序展平column
    function columnLine(column) {
    column.map(ele => {
    if (ele.children === undefined || ele.children.length === 0) {
    columnLineArr.push(ele);
    } else {
    columnLine(ele.children);
    }
    });
    }
    // 初始化表头
    function init(column, rowIndex, columnIndex) {
    column.map((item, index) => {
    let hCell = sheet.cell(rowIndex, columnIndex);
    // 如果没有子元素, 撑满列
    if (item.title === '操作') {
    hCell.value = '';
    return;
    } else if (item.children === undefined || item.children.length === 0) {
    // 第一行加一个单元格
    hCell.value = item.title;
    hCell.vMerge = depth - rowIndex - 1;
    hCell.style.align.h = 'center';
    hCell.style.align.v = 'center';
    columnIndex++;
    // rowIndex++
    } else {
    let childrenNum = 0;
    function getColumns(arr) {
    arr.map(ele => {
    if (ele.children) {
    getColumns(ele.children);
    } else {
    childrenNum++;
    }
    });
    }
    getColumns(item.children);
    hCell.hMerge = childrenNum - 1;
    hCell.value = item.title;
    hCell.style.align.h = 'center';
    hCell.style.align.v = 'center';
    let rowCopy = rowIndex;
    rowCopy++;
    init(item.children, rowCopy, columnIndex);
    // 下次单元格起点
    columnIndex = columnIndex + childrenNum;
    }
    });
    }
    // 获取表头rows
    function getDepth(arr) {
    const eleDepths = [];
    arr.forEach(ele => {
    let depth = 0;
    if (Array.isArray(ele.children)) {
    depth = getDepth(ele.children);
    }
    eleDepths.push(depth);
    });
    return 1 + max(eleDepths);
    }

    function max(arr) {
    return arr.reduce((accu, curr) => {
    if (curr > accu) return curr;
    return accu;
    });
    }
    // 计算表头列数
    function getColumns(arr) {
    let columnNum = 0;
    arr.map(ele => {
    if (ele.children) {
    getColumns(ele.children);
    } else {
    columnNum++;
    }
    });
    return columnNum;
    }
    }

    export default ExportExcel;
  • 引入文件,只要传入表头字段和表格数据即可。

-------------本文结束感谢您的阅读-------------

本文标题:antd design 中表格数据导出为excel(支持多表头)

文章作者:陈晓拉尼

发布时间:2019年07月02日 - 15:07

最后更新:2019年07月02日 - 16:07

原始链接:http://yoursite.com/archives/31747.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。