React开发Excel加载项：如何实现当前及左右相邻单元格填色

要给当前单元格和左右相邻单元格统一设置填充色，核心是把单个单元格的地址扩展为包含目标列的连续行范围，再对这个范围应用格式。以下是具体实现方案：

步骤1：实现列名与索引的转换 #

Excel的列名是字母形式（A、B...AA、AB），需要转成数字索引才能计算左右列，再转回列名构建范围地址：

// 列名转数字索引（A=1，B=2，以此类推）
function columnNameToIndex(columnName) {
  let index = 0;
  for (const char of columnName.toUpperCase()) {
    index = index * 26 + (char.charCodeAt(0) - 'A'.charCodeAt(0) + 1);
  }
  return index;
}

// 数字索引转列名（1=A，2=B，以此类推）
function indexToColumnName(index) {
  let columnName = '';
  while (index > 0) {
    const remainder = (index - 1) % 26;
    columnName = String.fromCharCode('A'.charCodeAt(0) + remainder) + columnName;
    index = Math.floor((index - 1) / 26);
  }
  return columnName;
}

步骤2：扩展范围并设置填充色 #

解析输入的单元格地址，计算左右列，构建包含目标单元格的范围，再设置颜色：

async function colorCurrentAndAdjacentCells(address) {
  try {
    // 拆分地址中的列名和行号
    const matchResult = address.match(/([A-Za-z]+)(\d+)/);
    if (!matchResult) throw new Error('无效的单元格地址');
    
    const [, columnName, rowStr] = matchResult;
    const rowNumber = parseInt(rowStr);
    const currentColIndex = columnNameToIndex(columnName);
    
    // 收集要设置颜色的列（处理边界：A列无左列，最后一列无右列）
    const targetColumns = [];
    if (currentColIndex > 1) {
      targetColumns.push(indexToColumnName(currentColIndex - 1));
    }
    targetColumns.push(columnName);
    targetColumns.push(indexToColumnName(currentColIndex + 1));
    
    // 构建范围地址，比如输入B3会得到A3:C3
    const rangeAddress = `${targetColumns[0]}${rowNumber}:${targetColumns.at(-1)}${rowNumber}`;
    const range = worksheet.getRange(rangeAddress);
    
    // 设置填充色并同步上下文
    range.format.fill.color = "red";
    await range.context.sync();
  } catch (err) {
    console.error('设置填充色失败:', err);
  }
}

关键说明 #

• 正则表达式/([A-Za-z]+)(\d+)/可以兼容所有合法的Excel单元格地址（包括多字母列名如AA、AB）。
• 边界处理：如果当前单元格是A列，只会包含当前列和右列；如果是最后一列，Excel API会自动忽略不存在的列，不会抛出错误。
• 必须调用await range.context.sync()，因为Excel JS API是异步操作，需要同步上下文才能让格式修改生效。

内容的提问来源于stack exchange，提问作者Muhammad Haroon Iqbal