vue3导出xlsx并自定义表头和样式

可以使用第三方库"xlsx"来导出xlsx文件，并通过设置表头和样式来自定义导出的文件。具体实现步骤如下：

1. 安装"xlsx"库：

npm install xlsx --save

2. 导入"xlsx"库和数据：

import XLSX from 'xlsx';

const data = [ 
    { name: "张三", age: 18, sex: "男" }, 
    { name: "李四", age: 20, sex: "女" }, 
    { name: "王五", age: 22, sex: "男" } 
];

3. 定义表头和样式：

const headers = ["姓名", "年龄", "性别"];

const styles = {
    header: {
        fill: {
            fgColor:{rgb:"EDEDED"}
        },
        font: {
            color: { rgb: "000000" },
            bold: true
        }
    },
    cell: {
        font: { sz: 14 }
    }
}

4. 定义导出文件的格式和文件名：

const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const fileExtension = '.xlsx';
const fileName = '用户信息表';

5. 将数据转换为表格：

const worksheet = XLSX.utils.json_to_sheet(data);

6. 设置表头和样式：

worksheet["A1"].v = headers[0];
worksheet["B1"].v = headers[1];
worksheet["C1"].v = headers[2];

worksheet["A1"].s = styles.header;
worksheet["B1"].s = styles.header;
worksheet["C1"].s = styles.header;

let range = XLSX.utils.decode_range(worksheet["!ref"]);
for(let i = 1; i <= range.e.r; i++) {
    let ref = XLSX.utils.encode_col(0) + i;
    worksheet[ref].s = styles.cell;

    ref = XLSX.utils.encode_col(1) + i;
    worksheet[ref].s = styles.cell;

    ref = XLSX.utils.encode_col(2) + i;
    worksheet[ref].s = styles.cell;
}

7. 将表格增加到工作簿中：

const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

8. 导出xlsx文件：

const file = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
let blob = new Blob([file], {type: fileType});
saveAs(blob, fileName + fileExtension);