带样式导出Excel文件？试试 xlsx-js-style

写在前面

使用 xlsx 库可以将数据导出为文件，但是要为文件的加上样式（比如字体、字号、列宽...），xlsx 库开源版本并不支持。多方查找下，了解到 xlsx-js-style 这个库可满足要求。

具体方法：show me the code

1. 安装

npm install xlsx-js-style

2. 引入

import X_STYLE from 'xlsx-js-style';

3. 导出方法

exportDataWithStyles = (data, fileName)=>{
    // STEP 1: 创建workbook
    const wb = X_STYLE.utils.book_new();

    // STEP 2: Create data rows and styles
    //将数据源转成需要的二维数组
    let header = [];
    //设置表头数据
    for (let key in data[0]) {
        header.push({
            v: key,
            t: 's',
            s: {
                // font 字体属性
                font: {
                    bold: true, //加粗
                    sz: 11, //字号
                    name: '微软雅黑', //字体
                },
                // alignment 对齐方式
                alignment: {
                    vertical: 'center', // 垂直居中
                    horizontal: 'center', // 水平居中
                },
            }
        })
    }
    //设置正文数据
    const body = data.map(obj => {
        let item = [];
        for (let key in obj) {
            item.push({
                v: obj[key],
                t: 's',
                s: {
                    // font 字体属性
                    font: {
                        bold: false,
                        sz: 11,
                        name: '宋体',
                    },
                    // alignment 对齐方式
                    alignment: {
                        vertical: 'center', // 垂直居中
                        horizontal: 'center', // 水平居中
                    },
                }
            });
        }
        return item;
    });
    //将表头放在二维数组开头
    body.unshift(...[header]);

    // STEP 3: Create worksheet with rows; Add worksheet to workbook
    const ws = X_STYLE.utils.aoa_to_sheet(body);
    // 设置列宽, 将cols添加到sheet中
    ws['!cols'] = header.map(item => {
        return {wch: 30}
    });

    X_STYLE.utils.book_append_sheet(wb, ws, "Sheet1");

    // STEP 4: Write Excel file to browser
    X_STYLE.writeFile(wb, `${fileName}.xlsx`);
}

4. 调用

//需要导出的数据，一个对象数组
//通常由请求接口获得
const data = [
    {
        name: '梅西',
        job: '足球运动员'
    },
    {
        name: '余华',
        job: '作家'
    },
]
const filename = '示例';
ExcelUtils.exportDataWithStyles(data, filename);

5. 文件效果：示例.xlsx

• 表头：字体为”微软雅黑“、字号11、加租、居中
• 正文：字体为”宋体“、字号11、居中
• 列宽：30

More

你可以在 xlsx-js-style - npm (npmjs.com) 找到更多