ExcelJS单元格样式：字体、颜色与边框设置-优快云博客

ExcelJS单元格样式：字体、颜色与边框设置

【免费下载链接】exceljs exceljs: 一个用于读取、操作和写入电子表格数据以及样式到XLSX和JSON文件的库，支持Excel文件的逆向工程。项目地址: https://gitcode.com/gh_mirrors/ex/exceljs

你是否曾为电子表格中单调的单元格样式感到困扰？是否希望通过简单的代码就能让数据呈现更加专业美观？本文将带你全面掌握ExcelJS（一个用于读取、操作和写入电子表格数据以及样式到XLSX和JSON文件的库）的单元格样式设置技巧，从字体、颜色到边框，让你的表格焕然一新。读完本文，你将能够轻松实现各种复杂的单元格样式效果，提升数据可视化水平。

一、ExcelJS样式系统概述

ExcelJS的样式系统基于单元格（Cell）对象实现，通过lib/doc/cell.js中的Cell类提供完整的样式控制能力。单元格样式主要包括字体（font）、填充（fill）、边框（border）、对齐方式（alignment）等属性，这些属性通过cell.style对象进行统一管理。

1.1 样式继承机制

ExcelJS采用层级式样式继承机制，优先级从高到低依次为：

单元格样式（cell.style）
行样式（row.style）
列样式（column.style）

这种机制允许你在不同层级设置样式，减少重复代码。例如，你可以为整行设置默认字体，然后为特定单元格覆盖部分样式。

1.2 核心样式类结构

ExcelJS的样式系统核心定义在以下文件中：

lib/doc/cell.js：定义Cell类及其样式属性
lib/xlsx/xform/style/：包含各种样式转换类，如字体、边框、填充等

二、字体样式设置

字体样式是单元格样式中最常用的部分，通过cell.font属性进行设置。ExcelJS支持丰富的字体属性，包括字体名称、大小、粗细、斜体、下划线等。

2.1 基本字体设置

以下代码示例展示了如何设置单元格的基本字体样式：

// 设置A1单元格字体
worksheet.getCell('A1').font = {
  name: '微软雅黑',
  size: 14,
  bold: true,
  italic: false,
  underline: false,
  color: { argb: 'FF000000' } // 黑色
};

在lib/doc/cell.js中，字体样式通过font属性的getter和setter方法进行管理：

get font() {
  return this.style.font;
}

set font(value) {
  this.style.font = value;
}

2.2 高级字体效果

ExcelJS还支持一些高级字体效果，如下划线样式、删除线等：

// 设置下划线和删除线
worksheet.getCell('A2').font = {
  name: 'Arial',
  size: 12,
  underline: 'double', // 双线下划线
  strike: true, // 删除线
  color: { argb: 'FFFF0000' } // 红色
};

2.3 字体样式应用示例

假设我们要创建一个标题行，需要加粗、增大字号并居中对齐：

// 获取第一行
const titleRow = worksheet.getRow(1);
// 设置行高
titleRow.height = 25;
// 设置行样式
titleRow.font = {
  name: '宋体',
  size: 16,
  bold: true
};
// 设置对齐方式
titleRow.alignment = {
  vertical: 'middle',
  horizontal: 'center'
};

三、颜色设置

ExcelJS支持为单元格文本和背景设置颜色，颜色可以通过多种方式定义，包括ARGB值、RGB值、主题颜色等。

3.1 文本颜色

文本颜色通过字体对象的color属性设置，支持ARGB格式（带透明度）和RGB格式：

// ARGB格式（A=透明度，RGB=颜色值）
worksheet.getCell('B1').font = {
  color: { argb: 'FFFF5500' }, // 橙色
  name: '微软雅黑',
  size: 12
};

// RGB格式
worksheet.getCell('B2').font = {
  color: { rgb: 'FF00FF' }, // 紫色
  name: '微软雅黑',
  size: 12
};

3.2 单元格背景色

单元格背景色通过cell.fill属性设置，支持纯色填充和渐变填充：

// 纯色填充
worksheet.getCell('C1').fill = {
  type: 'pattern',
  pattern: 'solid',
  fgColor: { argb: 'FFCCFFCC' } // 浅绿色
};

// 渐变填充
worksheet.getCell('C2').fill = {
  type: 'gradient',
  gradient: 'linear',
  degree: 45,
  stops: [
    { position: 0, color: { argb: 'FFFFFFFF' } }, // 白色
    { position: 1, color: { argb: 'FF0000FF' } }  // 蓝色
  ]
};

填充样式的实现逻辑可以在lib/xlsx/xform/style/fill-xform.js中找到，该文件处理填充样式的XML序列化与反序列化。

3.3 颜色应用示例

创建一个状态标签单元格，根据不同状态显示不同颜色：

function setStatusCell(cell, status) {
  switch(status) {
    case '成功':
      cell.value = '成功';
      cell.fill = {
        type: 'pattern',
        pattern: 'solid',
        fgColor: { argb: 'FF00FF00' } // 绿色
      };
      cell.font.color = { argb: 'FFFFFFFF' }; // 白色文本
      break;
    case '警告':
      cell.value = '警告';
      cell.fill = {
        type: 'pattern',
        pattern: 'solid',
        fgColor: { argb: 'FFFFFF00' } // 黄色
      };
      cell.font.color = { argb: 'FF000000' }; // 黑色文本
      break;
    case '错误':
      cell.value = '错误';
      cell.fill = {
        type: 'pattern',
        pattern: 'solid',
        fgColor: { argb: 'FFFF0000' } // 红色
      };
      cell.font.color = { argb: 'FFFFFFFF' }; // 白色文本
      break;
  }
}

// 使用示例
setStatusCell(worksheet.getCell('D1'), '成功');
setStatusCell(worksheet.getCell('D2'), '警告');
setStatusCell(worksheet.getCell('D3'), '错误');

四、边框设置

边框是提升表格可读性的重要元素，ExcelJS支持为单元格设置各种边框样式，包括线条类型、颜色、粗细等。

4.1 边框基本设置

边框通过cell.border属性设置，可以分别控制上、下、左、右四个方向的边框：

// 设置单元格所有边框为细实线
worksheet.getCell('E1').border = {
  top: { style: 'thin', color: { argb: 'FF000000' } },
  left: { style: 'thin', color: { argb: 'FF000000' } },
  bottom: { style: 'thin', color: { argb: 'FF000000' } },
  right: { style: 'thin', color: { argb: 'FF000000' } }
};

边框样式的具体实现可以在lib/xlsx/xform/style/border-xform.js中查看。

4.2 边框样式类型

ExcelJS支持多种边框线条样式，如细线、粗线、虚线、点线等：

// 不同边框样式示例
const borderStyles = [
  'thin', 'medium', 'thick', 'dashed', 'dotted',
  'double', 'hair', 'mediumDashed', 'dashDot',
  'mediumDashDot', 'dashDotDot', 'mediumDashDotDot', 'slantDashDot'
];

// 创建边框样式示例表格
borderStyles.forEach((style, index) => {
  const row = index + 1;
  worksheet.getCell(`F${row}`).value = style;
  worksheet.getCell(`G${row}`).border = {
    top: { style: style, color: { argb: 'FF000000' } },
    left: { style: style, color: { argb: 'FF000000' } },
    bottom: { style: style, color: { argb: 'FF000000' } },
    right: { style: style, color: { argb: 'FF000000' } }
  };
});

4.3 边框应用示例

创建一个带外边框的表格区域：

// 定义表格区域
const startRow = 1;
const endRow = 5;
const startCol = 1;
const endCol = 4;

// 设置外边框
for (let row = startRow; row <= endRow; row++) {
  for (let col = startCol; col <= endCol; col++) {
    const cell = worksheet.getCell(row, col);
    cell.border = {};
    
    // 上边框
    if (row === startRow) {
      cell.border.top = { style: 'thick', color: { argb: 'FF000000' } };
    }
    
    // 下边框
    if (row === endRow) {
      cell.border.bottom = { style: 'thick', color: { argb: 'FF000000' } };
    }
    
    // 左边框
    if (col === startCol) {
      cell.border.left = { style: 'thick', color: { argb: 'FF000000' } };
    }
    
    // 右边框
    if (col === endCol) {
      cell.border.right = { style: 'thick', color: { argb: 'FF000000' } };
    }
  }
}

五、综合样式应用实例

下面我们将综合运用前面所学的知识，创建一个产品销售报表的表头样式：

// 创建一个产品销售报表表头
function createReportHeader(worksheet) {
  // 合并单元格作为主标题
  worksheet.mergeCells('A1:E1');
  const titleCell = worksheet.getCell('A1');
  titleCell.value = '2025年第一季度产品销售报表';
  titleCell.font = {
    name: '微软雅黑',
    size: 18,
    bold: true,
    color: { argb: 'FF000080' } // 深蓝色
  };
  titleCell.alignment = {
    vertical: 'middle',
    horizontal: 'center'
  };
  titleCell.fill = {
    type: 'gradient',
    gradient: 'linear',
    degree: 90,
    stops: [
      { position: 0, color: { argb: 'FFE6F2FF' } },
      { position: 1, color: { argb: 'FFB3D9FF' } }
    ]
  };
  titleCell.border = {
    bottom: { style: 'medium', color: { argb: 'FF000080' } }
  };
  
  // 设置列标题样式
  const headers = ['产品名称', '销售数量', '单价', '销售额', '同比增长'];
  headers.forEach((header, index) => {
    const col = String.fromCharCode(65 + index); // A, B, C, D, E
    const cell = worksheet.getCell(`${col}2`);
    cell.value = header;
    cell.font = {
      name: '微软雅黑',
      size: 12,
      bold: true,
      color: { argb: 'FFFFFFFF' }
    };
    cell.alignment = {
      vertical: 'middle',
      horizontal: 'center'
    };
    cell.fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: 'FF000080' } // 深蓝色
    };
    cell.border = {
      top: { style: 'thin', color: { argb: 'FF000000' } },
      left: { style: 'thin', color: { argb: 'FF000000' } },
      bottom: { style: 'thin', color: { argb: 'FF000000' } },
      right: { style: 'thin', color: { argb: 'FF000000' } }
    };
  });
  
  // 设置列宽
  worksheet.getColumn('A').width = 20;
  worksheet.getColumn('B').width = 15;
  worksheet.getColumn('C').width = 10;
  worksheet.getColumn('D').width = 15;
  worksheet.getColumn('E').width = 15;
}

// 应用表头样式
createReportHeader(worksheet);

六、总结与展望

通过本文的介绍，你已经掌握了ExcelJS中单元格样式设置的核心技巧，包括字体、颜色和边框的各种属性配置方法。这些技巧可以帮助你创建更加专业、美观的电子表格，提升数据可视化效果。

ExcelJS的样式系统还有更多高级功能值得探索，如条件格式、数据验证、单元格合并等。你可以通过查阅官方文档和源代码进一步深入学习。

希望本文对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言讨论。如果你觉得本文有用，请点赞、收藏并关注我们，获取更多ExcelJS使用技巧和最佳实践！

下一篇文章我们将介绍ExcelJS的高级数据处理功能，敬请期待！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考