exceljs库实现excel表样式定制化

概览

xlsx 是前端最热门的 Excel 导出方案,又叫做 SheetJs,默认不支持修改 Excel 的样式。而exceljs库就可以做到自定义excel表样式,下面来介绍一下其使用方法

一. 完整示例

代码示例

javascript 复制代码
const exportTemplate2 = () => {  
  // 创建工作簿  
  const workbook = new ExcelJS.Workbook();  
  const worksheet = workbook.addWorksheet('sheet1');  
  
  // 定义列  
  worksheet.columns = [  
    { header: 'Id11111111111111111111', key: 'id', width: 20 },  
    { header: 'Name233', key: 'name', width: 20 },  
    { header: 'D.O.B999', key: 'dob', width: 20 }  
  ];  
  
  // 添加二级表头  
  worksheet.addRow(['二级表头A', '二级表头B', '二级表头C']);  
  
  // 填充数据  
  const columnData = [  
    { id: 15, name: 99, dob: '2024-04-16' },  
    { id: 50, name: 101, dob: '2024-04-17' }  
  ];  
  columnData.forEach(item => {  
    worksheet.addRow(item);  
  });  
  
  // 设置第一行表头背景色和字体颜色  
  worksheet.getRow(1).eachCell({ includeEmpty: true }, (cell, colNumber) => {  
    cell.fill = {  
      type: 'pattern',  
      pattern: 'solid',  
      fgColor: { argb: (colNumber === 1 || colNumber === 2) ? 'FF79bbff' : 'FF95d475' }  
    };  
    cell.font = {  
      size: 14,  
      color: { argb: 'FFFFFFFF' } // 白色  
    };  
  });  
  
  // 设置第二行表头字体颜色  
  worksheet.getRow(2).eachCell({ includeEmpty: true }, (cell) => {  
    cell.font = {  
      size: 14,  
      color: { argb: 'FFF89898' } // 浅红色  
    };  
  });  
  
  // 应用自动筛选  
  worksheet.autoFilter = 'A1:C2'; // 筛选整个表头区域  
  
  // 合并单元格  
  worksheet.mergeCells("A1:C1"); // 合并整个第一行  
  
  // 添加条件格式  
  worksheet.addConditionalFormatting({  
    ref: "B3:B4",  
    rules: [  
      {  
        type: 'cellIs',  
        operator: 'lessThan',  
        priority: 1,  
        formulae: ['100'],  
        style: {  
          fill: {  
            type: 'pattern',  
            pattern: 'solid',  
            fgColor: { argb: 'FF95d475' },  
          },  
        },  
      },  
    ],  
  });  
  
  // 添加求和公式到A5单元格  
  worksheet.getCell('A5').value = {  
    formula: 'SUM(A3:A4)',  
    result: null // ExcelJS会自动计算结果,无需显式设置result为null  
  };  
  
  // 计算工作表  
  console.log(worksheet,'worksheet')
  
  // 写入Excel文件  
  workbook.xlsx.writeBuffer().then((buffer) => {  
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });  
    saveAs(blob, 'ExcelJS.xlsx');  
  }).catch((error) => {  
    console.error('Error exporting Excel file:', error);  
  });  
};  

二. 设置表头和填充数据

javascript 复制代码
 // 定义列  
  worksheet.columns = [  
    { header: 'Id11111111111111111111', key: 'id', width: 20 },  
    { header: 'Name233', key: 'name', width: 20 },  
    { header: 'D.O.B999', key: 'dob', width: 20 }  
  ];  
  
  // 添加二级表头  
  worksheet.addRow(['二级表头A', '二级表头B', '二级表头C']);  
  
  // 填充数据  
  const columnData = [  
    { id: 15, name: 99, dob: '2024-04-16' },  
    { id: 50, name: 101, dob: '2024-04-17' }  
  ];  
  columnData.forEach(item => {  
    worksheet.addRow(item);  
  });  

worksheet.columns中

header: 表头显示的内容;

key: 表格内容对应的属性key,和赋值的columnData中的属性名关联起来;

width:设置单元格的宽度。

三. 设置表头样式

javascript 复制代码
// 设置第一行表头背景色和字体颜色  
  worksheet.getRow(1).eachCell({ includeEmpty: true }, (cell, colNumber) => {  
    cell.fill = {  
      type: 'pattern',  
      pattern: 'solid',  
      fgColor: { argb: (colNumber === 1 || colNumber === 2) ? 'FF79bbff' : 'FF95d475' }  
    };  
    cell.font = {  
      size: 14,  
      color: { argb: 'FFFFFFFF' } // 白色  
    };  
  });  
  
  // 设置第二行表头字体颜色  
  worksheet.getRow(2).eachCell({ includeEmpty: true }, (cell) => {  
    cell.font = {  
      size: 14,  
      color: { argb: 'FFF89898' } // 浅红色  
    };  
  });  

argb: 前面两位为透明度设置,通常设置成FF就行,代表不透明,比如黑色十六进制为#000000,转换成argb格式转成FF000000即可。

四. 总结

抛砖引玉,以上示例是我们日常工作较常见的场景,更多功能大家可以继续探索。

相关推荐
今晚打老虎z4 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户3802258598249 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴15 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干18 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗20 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder25 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder28 分钟前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github
snakeshe101029 分钟前
优化 Mini React:实现组件级别的精准更新
前端
前端小盆友29 分钟前
从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
前端·gpt·react.js
京东云开发者35 分钟前
行云前端重构之路:从单体应用到 Monorepo 的血泪史
前端