如何在Angular+TypeScript中用XLSX库设置Excel列名加粗？

原生SheetJS XLSX库本身不支持单元格样式设置，要实现列名加粗，你需要使用它的分支库xlsx-style（该库在XLSX基础上扩展了样式支持），具体步骤如下：

1. 安装依赖 #

先安装xlsx-style及对应的类型声明：

npm install xlsx-style --save
npm install @types/xlsx-style --save-dev

2. 修改代码实现样式 #

替换原有的XLSX导入，然后给表头单元格添加加粗样式：

import * as XLSX from 'xlsx-style'; // 替换原XLSX导入

export_to_excel() {
  this.downloadSpinner = true;
  this.reportService.getBCPayoutReportData()
    .subscribe({
      next: data => {
        if (data.length != 0) {
          const XlsMasterData = data;
          const workSheet = XLSX.utils.json_to_sheet(XlsMasterData);
          this.fixWidth(workSheet);

          // 定义加粗样式
          const boldStyle = {
            font: {
              bold: true
            }
          };

          // 获取表头所在的第一行，给所有单元格应用加粗样式
          const range = XLSX.utils.decode_range(workSheet['!ref'] || 'A1');
          for (let col = range.s.c; col <= range.e.c; col++) {
            const cellAddr = XLSX.utils.encode_cell({ r: 0, c: col });
            if (workSheet[cellAddr]) {
              workSheet[cellAddr].s = boldStyle;
            } else {
              workSheet[cellAddr] = { t: 's', v: '', s: boldStyle };
            }
          }

          const workBook: XLSX.WorkBook = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(workBook, workSheet, 'SheetName');
          XLSX.writeFile(workBook, 'report.xlsx');
        } else {
          this.showSwalmessage("No record Found!", "", "warning", true);
        }
      },
      error: (error: any) => {
        this.showSwalmessage("Something Went wrong", error, "warning", true);
      },
      complete: () => {
        this.downloadSpinner = false;
      }
    });
}

代码说明 #

• 替换导入为xlsx-style，它和原生XLSX的API几乎完全兼容，仅新增样式支持
• 定义boldStyle对象，指定字体加粗的样式规则
• 通过decode_range解析工作表的单元格范围，遍历第一行所有列（表头所在行）
• 给每个表头单元格添加s属性，赋值为加粗样式
• 正常导出即可得到表头加粗的Excel文件

如果不想额外引入xlsx-style，也可以改用exceljs这类侧重样式的Excel处理库，但需要调整整个导出逻辑适配其API。

内容的提问来源于stack exchange，提问作者Purushottam Nawale