目录

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即可。

四. 总结

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试