使用react-export-excel设置列宽报s.t.match is not a function如何解决？

问题原因 #

你触发报错的核心原因是react-export-excel的列配置对象的表头文本字段名使用错误，库要求表头文本对应的键是title而非你写的value，底层xlsx处理库读取表头内容时拿到了未识别的结构，就会触发s.t.match is not a function的类型错误。

解决方案 #

有两种可行的配置方式实现自定义列宽：

方式1：调整columns对象结构 #

直接在columns的每个配置项中用正确的字段名，同时指定列宽：

columns: [
  {
    title: "Column 1",
    widthPx: 250,
  },
  {
    title: "Column 2",
    widthPx: 200,
  },
  {
    title: "Column 3",
    widthPx: 200,
  },
  {
    title: "Column 4",
    widthPx: 160,
  }
],

方式2：拆分配置（适合多sheet复用列宽的场景） #

columns保留字符串数组写法，额外给ExcelSheet组件新增columnWidths属性配置每列宽度，顺序和columns对应即可：

// 列名配置
columns: ["Column 1", "Column 2", "Column 3", "Column 4"],
// 新增列宽配置，单位px
columnWidths: [250, 200, 200, 160]

两种方式任选其一即可同时满足表头展示、自定义列宽的需求，不会再触发类型报错。

内容的提问来源于stack exchange，提问作者João Bonsegno