xlsx-js-style 如何配置表格样式

xlsx-js-style 是一个用于处理 Excel 文件的 JavaScript 库，基于 xlsx 库并添加了对样式的支持。通过 xlsx-js-style，你可以设置单元格的字体、背景、边框等样式。下面是如何使用 xlsx-js-style 库配置表格样式的步骤。

1. 安装库

首先，确保你已经安装了 xlsx-js-style 库：

npm install xlsx-js-style

2. 创建并配置工作簿和工作表

下面是一个示例，展示了如何创建一个 Excel 文件，并为单元格设置样式：

import XLSX from 'xlsx-js-style';

// 创建一个新的工作簿
const workbook = XLSX.utils.book_new();

// 创建数据
const worksheetData = [
  ['Name', 'Age', 'Gender'],
  ['John Doe', 29, 'Male'],
  ['Jane Smith', 32, 'Female']
];

// 将数据转换为工作表
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);

// 设置样式
worksheet['A1'].s = {
  font: {
    name: 'Arial',
    sz: 14,
    bold: true,
    color: { rgb: 'FF0000' } // 红色字体
  },
  fill: {
    fgColor: { rgb: 'FFFF00' } // 黄色背景
  },
  border: {
    top: { style: 'thin', color: { rgb: '000000' } },
    bottom: { style: 'thin', color: { rgb: '000000' } },
    left: { style: 'thin', color: { rgb: '000000' } },
    right: { style: 'thin', color: { rgb: '000000' } }
  },
  alignment: {
    horizontal: 'center',
    vertical: 'center'
  }
};

// 将工作表添加到工作簿中
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

// 将工作簿导出为 Excel 文件
XLSX.writeFile(workbook, 'styled_sheet.xlsx');

3. 样式配置选项

以下是 xlsx-js-style 中常用的样式配置选项：

• 字体样式（font）

  font: {
    name: 'Arial',   // 字体名称
    sz: 12,          // 字体大小
    bold: true,      // 粗体
    italic: false,   // 斜体
    underline: false,// 下划线
    color: { rgb: 'FF0000' } // 字体颜色（红色）
  }
  

• 填充样式（fill）

  fill: {
    fgColor: { rgb: 'FFFF00' } // 填充颜色（黄色）
  }
  

• 边框样式（border）

  border: {
    top: { style: 'thin', color: { rgb: '000000' } }, // 上边框
    bottom: { style: 'thin', color: { rgb: '000000' } }, // 下边框
    left: { style: 'thin', color: { rgb: '000000' } }, // 左边框
    right: { style: 'thin', color: { rgb: '000000' } } // 右边框
  }
  

• 对齐方式（alignment）

  alignment: {
    horizontal: 'center', // 水平对齐方式（left, center, right）
    vertical: 'center'    // 垂直对齐方式（top, center, bottom）
  }
  

4. 完整示例

这里是一个更复杂的示例，展示了如何为多个单元格设置不同的样式：

import XLSX from 'xlsx-js-style';

// 创建一个新的工作簿
const workbook = XLSX.utils.book_new();

// 创建数据
const worksheetData = [
  ['Name', 'Age', 'Gender'],
  ['John Doe', 29, 'Male'],
  ['Jane Smith', 32, 'Female']
];

// 将数据转换为工作表
const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);

// 设置表头样式
['A1', 'B1', 'C1'].forEach(cell => {
  worksheet[cell].s = {
    font: {
      name: 'Arial',
      sz: 14,
      bold: true,
      color: { rgb: 'FFFFFF' }
    },
    fill: {
      fgColor: { rgb: '4CAF50' } // 绿色背景
    },
    alignment: {
      horizontal: 'center',
      vertical: 'center'
    }
  };
});

// 设置内容样式
['A2', 'B2', 'C2', 'A3', 'B3', 'C3'].forEach(cell => {
  worksheet[cell].s = {
    font: {
      name: 'Arial',
      sz: 12,
      color: { rgb: '000000' }
    },
    border: {
      top: { style: 'thin', color: { rgb: '000000' } },
      bottom: { style: 'thin', color: { rgb: '000000' } },
      left: { style: 'thin', color: { rgb: '000000' } },
      right: { style: 'thin', color: { rgb: '000000' } }
    },
    alignment: {
      horizontal: 'center',
      vertical: 'center'
    }
  };
});

// 将工作表添加到工作簿中
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

// 将工作簿导出为 Excel 文件
XLSX.writeFile(workbook, 'styled_sheet.xlsx');

总结

通过 xlsx-js-style，你可以轻松地为 Excel 文件中的单元格设置样式。关键在于理解和使用各种样式配置选项，如字体、填充、边框和对齐方式。以上示例展示了如何使用这些选项来配置单元格样式，并生成一个带有样式的 Excel 文件。

空白的单元格设置样式

确保在使用 xlsx-js-style 设置空白单元格样式时，需要确保在处理工作表时，即使单元格为空，也要为每个单元格对象设置样式属性。以下是确保空白单元格样式生效的方法：

1. 为每个单元格设置默认样式：

   import XLSX from 'xlsx-js-style';
   
   const workbook = XLSX.utils.book_new();
   const worksheetData = [
     ['Name', 'Age', 'Gender'],
     ['John Doe', 29, 'Male'],
     ['', '', '']
   ];
   
   const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
   
   // 设置默认样式，确保每个单元格都有样式对象
   for (let r = 0; r < worksheetData.length; r++) {
     for (let c = 0; c < worksheetData[r].length; c++) {
       const cellAddress = XLSX.utils.encode_cell({ r: r, c: c });
       if (!worksheet[cellAddress]) {
         worksheet[cellAddress] = {};
       }
       worksheet[cellAddress].s = {
         font: { name: 'Arial', sz: 12 },
         fill: { fgColor: { rgb: 'FFFFFF' } }, // 设置为白色背景
         border: { top: { style: 'thin', color: { rgb: '000000' } } },
         alignment: { horizontal: 'center', vertical: 'center' }
       };
     }
   }
   
   XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
   XLSX.writeFile(workbook, 'styled_sheet.xlsx');
   

   在上面的示例中，即使数据中有空白单元格 ['', '', '']，也会为每个单元格设置默认样式对象。确保 worksheet[cellAddress] 不为 null 或 undefined，以便正确应用样式。

2. 处理工作表时检查并设置样式：

   如果你动态地生成工作表或者数据中有空白单元格，确保在设置样式时检查每个单元格是否存在，并为其设置默认样式。这样可以确保所有单元格的样式都得到正确应用，无论是否包含文本内容。

3. 调试和验证：

   在设置样式后，导出生成的 Excel 文件并打开以验证样式是否正确应用。有时候 Excel 应用程序可能会缓存先前的样式设置，因此可以尝试重新打开文件或者在其他 Excel 视图中查看。

通过这些步骤，你应该能够正确地为空白单元格设置样式，并确保样式能够在生成的 Excel 文件中正确显示。