vue使用js-xlsx导出数据(多表)

import * as XLSX from 'xlsx-js-style';

//标题
export const listTitleFunc = (sheetName)=>{
    return  [
        {
            v: sheetName,
            t: 's',
            s: {
                font: {
                    bold: true,
                    color: {
                        rgb: '040404'
                    },
                    name: '宋体',
                    sz: 12
                },
                alignment: {
                    horizontal: 'center',
                    vertical: 'center',
                    wrapText: true
                },
                border: {
                    top: {
                        style: 'thin'
                    },
                    right: {
                        style: 'thin'
                    },
                    bottom: {
                        style: 'thin'
                    },
                    left: {
                        style: 'thin'
                    }
                }
            }
        }
    ];
}

// 表头
export const listHeadFunc = (columns)=>{
    return columns.map((item) => {
        // 设置样式
        let cell = {
            v: item.title,
            t: 's',
            s: {
                font: {
                    bold: true,
                    color: {
                        rgb: '040404'
                    },
                    name: '宋体',
                    sz: 12
                },
                alignment: {
                    horizontal: 'center',
                    vertical: 'center',
                    wrapText: true
                },
                border: {
                    top: {
                        style: 'thin'
                    },
                    right: {
                        style: 'thin'
                    },
                    bottom: {
                        style: 'thin'
                    },
                    left: {
                        style: 'thin'
                    }
                }
            }
        };
        return cell;
    });
}

// 宽度
export const colsFunc = (columns)=>{
    let data = []
    for (let i = 0; i < columns.length; i++) {
        let col = {};
        col.wch = columns[i].minWidth;
        data.push(col);
    }
    return data
}

/**
 *
 * @param {columns}  表头数据
 *          示例:columns = [
                {title: '序号',label: 'sort',minWidth: 10},
                {
                    title: '风险等级',
                    label: 'gradeStr',
                    minWidth: 20,
                    filter: (value)=> {
                        switch (value) {
                            case 1:return '高风险地区';
                            case 3:return '低风险地区';
                            default: return ''
                        }
                    },
                }]
 * @param {*} cTableData 表格数据
 * @param {*} sheetName 标题名称
 * @param {*} fileName 文件名称.xlsx
 * @param {*} sheetArr 每个表的名称-例如[sheet1,sheet2....]
 */
export const jsonTosheet = async function(columns,cTableData,sheetName,fileName,sheetArr) {
    // 标题处理
    let listTitle = listTitleFunc(sheetName)

    // 表头处理
    let listHead = listHeadFunc(columns)
    const excelData = {};
    let listConent = {};
    let worksheet = {};
    const workbook = XLSX.utils.book_new();
    const name =  fileName
    let cols = colsFunc(columns)

    Object.keys(cTableData).forEach((key, inx) => {
        listConent[key] = cTableData[key].map((item, index) => {
            // 处理序号
            item.sort = index + 1;
            // 设置样式
            let arr = columns.map((headItem) => {
                let content = ''
                if (headItem.filter) {
                    content = headItem.filter(item[headItem.label]);
                } else {
                    content = item[headItem.label];

                }

                let cell = {
                    v: content,
                    t: 's',
                    s: {
                        font: {
                            name: 'Calibri',
                            sz: 11,
                            color: {
                                rgb: '040404'
                            }
                        },
                        alignment: {
                            horizontal: 'center',
                            vertical: 'center',
                            wrapText: true
                        },
                        border: {
                            top: {
                                style: 'thin'
                            },
                            right: {
                                style: 'thin'
                            },
                            bottom: {
                                style: 'thin'
                            },
                            left: {
                                style: 'thin'
                            }
                        }
                    }
                };
                return cell;
            });
            return arr;
        });
        excelData[key] = [].concat([listTitle], [listHead], listConent[key]);
        let rows = []; // 设置每行的高度
        // hpx 字段表示以像素为单位,hpt 高度
        for (let i = 0; i < excelData[key].length; i++) {
            let row = {};
            row.hpt = 15;
            rows.push(row);
        }
        worksheet[key] = XLSX.utils.aoa_to_sheet(excelData[key]);
        worksheet[key]['!cols'] = cols; // 设置列宽信息到工作表

        worksheet[key]['!rows'] = rows; // 设置行高信息到工作表
        // 设置合并行列号--表头
        worksheet[key]['!merges'] = [
            {
                s: {
                    c: 0,
                    r: 0
                },
                e: {
                    c: worksheet[key]['!cols'].length - 1,
                    r: 0
                }
            }
        ];
        let sheet =  sheetArr[inx] || 'sheet'+(inx+1)
        XLSX.utils.book_append_sheet(workbook, worksheet[key], sheet);
    });
    console.log('开始写入', new Date());
    XLSX.writeFile(workbook, name);
    console.log('写入完成', new Date());
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值