前言

• 前端导出excel的方式有很多，如：js-export-excel；xlsx+file-saver，这两种方式添加样式都比较繁琐，这里采用xlsx-js-style实现
• 文档地址

导出方法

import XLSX from 'xlsx-js-style';

// 导出表头默认样式
const THeaderStyle = {
    // font 字体属性
    font: {
        bold: true,
        sz: 12
    },
    // alignment 对齐方式
    alignment: {
        vertical: 'center', // 垂直居中
        horizontal: 'center', // 水平居中
    },
    // fill 颜色填充属性
    fill: {
        fgColor: { rgb: 'f2f3f5' },
    },
    // border style
    border: {
        top: { style: 'thin', color: { rgb: '909399' } },
        right: { style: 'thin', color: { rgb: '909399' } },
        bottom: { style: 'thin', color: { rgb: '909399' } },
        left: { style: 'thin', color: { rgb: '909399' } }
    }
}

/**
 * json数据导出excel
 * @param params columns:表头数据   data:表格数据    excelName:导出的文件名    autoWidth: 自适应列宽
 * @returns 
 */
export const exportExcel = (params: { columns: any[], data: any[], excelName?: string, autoWidth?: boolean }) => {
    const { columns, data, excelName, autoWidth = true } = params
    const THeader: any = [], filterVal: any = [];
    columns.forEach((item: { label: any; prop: any; }) => {
        THeader.push({
            v: item.label,
            t: 's',
            s: THeaderStyle
        })
        filterVal.push(item.prop)
    })
    const TData = data.map(v => filterVal.map((j: string | number) => v[j]))
    const sheetData = [[...THeader], ...TData]
    const sheet = XLSX.utils.aoa_to_sheet(sheetData);// aoa_to_sheet 将二维数组转成 sheet

    // 自适应列宽
    if (autoWidth) {
        // 设置worksheet每列的最大宽度
        const colWidth = sheetData.map(row => row.map((val: { toString: () => { (): any; new(): any; charCodeAt: { (arg0: number): number; new(): any; }; length: number; }; } | null) => {
            // 先判断是否为null/undefined
            if (val == null) {
                return {
                    'width': 10
                }
            }
            // 再判断是否为中文
            else if (val.toString().charCodeAt(0) > 255) {
                return {
                    'width': val.toString().length * 2 + 2
                }
            } else {
                return {
                    'width': val.toString().length + 2
                }
            }
        }))
        // 以第一行为初始值
        const result = colWidth[0]
        for (let i = 1; i < colWidth.length; i++) {
            for (let j = 0; j < colWidth[i].length; j++) {
                if (result[j]['width'] < colWidth[i][j]['width']) {
                    result[j]['width'] = colWidth[i][j]['width']
                }
            }
        }
        // 将result添加到sheet中
        sheet['!cols'] = result
    }

    // 设置表头行高
    const rows = [{ hpx: 20 }]
    sheet['!rows'] = rows; // 将rows添加到sheet中，设置行高

    // 设置合并单元格
    // const merges = [
    //     { s: { r: 0, c: 0 }, e: { r: 0, c: 6 } },
    //     { s: { r: 1, c: 1 }, e: { r: 1, c: 2 } },
    //     { s: { r: 1, c: 3 }, e: { r: 1, c: 4 } },
    //     { s: { r: 1, c: 5 }, e: { r: 1, c: 6 } },
    //     { s: { r: 1, c: 0 }, e: { r: 2, c: 0 } },
    // ]
    // sheet['!merges'] = merges; // 将merges添加到sheet中

    // 创建虚拟的 workbook
    const workbook = XLSX.utils.book_new();
    // 向 workbook 中添加 sheet
    XLSX.utils.book_append_sheet(workbook, sheet, 'sheet名称');
    // 导出 workbook
    XLSX.writeFile(workbook, `${excelName ? (excelName.includes('.xlsx') ? excelName : excelName + '.xlsx') : 'excel名称.xlsx'}`);
}