使用ExcelJs导出表格设置样式、添加边框

需要用到exceljs和fileSaver
分别用npm安装一下
npm install -S exceljs
npm install -S file-saver

---

创建一个js文件，用于存放导出的方法

import ExcelJs from 'exceljs';
import FileSaver from 'file-saver';
export async function portTable(name, t, titleName, tableData, title, widths) {
    // name:下载的文件标题、工作簿名称
    // t: 表头需要合并的单元格
    // titleName: 表格第一行内容，是一个数组
    // tableData: 数据
    // title: 表头名
    // width: 各列的宽度

    const workbook = new ExcelJs.Workbook();
    const worksheet = workbook.addWorksheet(name);
    const row1 = worksheet.addRow(titleName);
    row1.font = { bold: true, size: 20 ,color:{ argb: 'FFFF0000'}}; // 第一行标题样式
    worksheet.mergeCells(t); // 合并单元格
    worksheet.getRow(1).getCell(1).alignment = { // 找到第一行的第一个单元格
        vertical: 'middle', horizontal: 'center' // 垂直居中，水平居中
    }
    worksheet.getCell("A1").fill={  // getCell("A1") == getRow(1).getCell(1)
        type: 'pattern',
        pattern:'solid',
        fgColor:{ argb: 'FF0000FF'}  // 设置单元格背景色
    }
    const handleData = tableData;
    const columns = title;
    worksheet.addTable({
        name: name,
        ref: 'A2', // 从A2单元格添加表格
        style: {
            theme: '',
            showRowStripes: true
        },
        columns: columns, // 列
        rows: handleData // 行
    });
    const width = widths;
    columns.forEach((r, i) => { // 控制列的宽度，以及对齐方式
        worksheet.getColumn(i + 1).width = width[i];
        worksheet.getColumn(i + 1).alignment = { vertical: 'middle', horizontal: 'center' }
    })
    // 添加边框
    for (let num = 0; num < worksheet.lastRow._number; num++) { // 循环出每一行
        for (let index = 0; index < columns.length; index++) { // 循环出每一个单元格
            worksheet.getRow(num+1).getCell(index+1).border={ // 为单元格添加边框
                top: {style:'thin'},
                left: {style:'thin'},
                bottom: {style:'thin'},
                right: {style:'thin'}
            }
        }
    }
    // console.log(worksheet.lastRow._number);
    const buffer = await workbook.xlsx.writeBuffer();
    return FileSaver(new Blob([buffer]), name + '.xlsx')
}

使用时引入一下这个方法

数据

tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                start: 4
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                start: 3
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                start: 4
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                start: 1
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                start: 2
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                start: 4
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                start: 2
            }],

使用方法，创建一个按钮，绑定事件

 // 导出表格exceljs
        exportTableSheet() {
            const columns = [
                { name: '时间' },
                { name: '姓名' },
                { name: '地址' },
                { name: '起点' }
            ];
            const width = [40, 40, 40, 40];
            const data = this.tableData.map(r => {
                return [r.date, r.name, r.address, r.start]
            })
            portTable( // 调用方法，记得使用前要import一下
                '这是一个表格啊',
                'A1:D1',
                ['这是一个表格'],
                data,
                columns,
                width
            )
        }

总结

xlsx、xlsxStyle和fileSaver一起使用也可以导出表格，并且设置表格样式，但是就目前来看，ExcelJs安装后可以直接使用，不用去解决依赖包的报错问题，还是不错的。
另外，使用ExcelJs还可以参考这篇文章ExcelJS 使用帮助文档