vue3+ts xlsx-style-vite修改导出excel表格字体颜色

要修改导出的 Excel 表格的字体颜色，你可以使用 xlsx-style 库提供的 `XLSXStyle` 类的 `createStyle` 方法来创建自定义样式，然后将其应用到单元格中。

下面是一个使用 Vue 3 + TypeScript 和 xlsx-style-vite 库的示例代码：

<template>
  <div>
    <button @click="exportExcel">导出 Excel</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { utils, writeFile } from 'xlsx-style-vite';
import { XLSXStyle } from 'xlsx-style-vite/xlsx-style';

export default defineComponent({
  methods: {
    exportExcel() {
      const data = [
        ['姓名', '年龄', '性别'],
        ['张三', 18, '男'],
        ['李四', 20, '女'],
        ['王五', 22, '男']
      ];

      const workbook = utils.book_new();
      const worksheet = utils.aoa_to_sheet(data);

      // 创建自定义样式
      const style = XLSXStyle.createStyle({
        font: {
          color: '#FF0000'
        }
      });

      // 将样式应用到单元格
      utils.sheet_set_cell_style(worksheet, 'A1:C1', style);

      utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      writeFile(workbook, 'example.xlsx');
    }
  }
});
</script>

在上面的代码中，我们首先创建了一个包含一些数据的数组 `data`。然后，我们使用 `utils.aoa_to_sheet` 方法将该数组转换为一个工作表对象。接着，我们使用 `XLSXStyle.createStyle` 方法创建了一个包含字体颜色为红色的自定义样式，并使用 `utils.sheet_set_cell_style` 方法将该样式应用到了表头行的所有单元格上。最后，我们将工作表对象添加到工作簿中，使用 `writeFile` 方法将工作簿导出为一个 Excel 文件。

需要注意的是，在使用 xlsx-style-vite 库时，要使用 `XLSXStyle` 类来创建自定义样式，这与原生的 xlsx-style 库有所不同，所以要引入 `xlsx-style-vite/xlsx-style` 模块。