SheetJS导出时单元格样式异常，文本隐藏问题咨询

核心原因与解决办法 #

1. 基础版SheetJS不支持样式，需用扩展方案 #

SheetJS社区基础版本身不提供单元格样式设置能力，如果你直接在基础版代码里写样式逻辑，完全不会生效。文本隐藏大概率是你误以为设置了行高/列宽、字体显示相关样式，但基础版不识别，导致单元格默认尺寸过小，文本被截断。

• 解决：
  • 用xlsx-style替代基础版：卸载xlsx，安装xlsx-style，通过以下方式设置样式和尺寸：

    // 设置第1列宽度为30字符
    ws['!cols'] = [{wch: 30}];
    // 设置第1行高度为25像素
    ws['!rows'] = [{hpx: 25}];
    // 给A1单元格设置可见样式
    ws['A1'].s = {
      font: {name: 'Calibri', sz: 11, color: {rgb: '000000'}},
      alignment: {vertical: 'center', wrapText: true},
      fill: {fgColor: {rgb: 'FFFFFF'}}
    };
    

  • 预算允许的话直接用SheetJS Pro版，原生支持完整样式API。

2. 行高/列宽未配置，文本被单元格截断 #

很多时候文本“隐藏”只是单元格尺寸不够，文本被挤到单元格外，并非真的隐藏。

• 解决：
  • 批量设置列宽：ws['!cols'] = [{wch: 25}, {wch: 30}, {wch: 20}]（按列顺序定义宽度）
  • 批量设置行高：ws['!rows'] = Array(10).fill({hpx: 20})（给前10行设置统一行高）
  • 开启自动换行：在单元格样式的alignment中添加wrapText: true，配合足够行高。

3. 数据格式或颜色配置导致视觉隐藏 #

如果单元格设置了;;;这类隐藏数值的格式，或者字体颜色和背景色一致，会造成文本看起来消失。

• 解决：
  • 检查并修正格式：

    // 错误示例：隐藏数值的格式
    // ws['A1'].s = {numFmt: ';;;'};
    // 正确：使用常规格式
    ws['A1'].s = {numFmt: 'General'};
    

  • 核对字体颜色font.color.rgb和背景色fill.fgColor.rgb，避免两者相同。

4. 导出方法未适配样式支持库 #

用xlsx-style这类扩展库时，要使用对应库的导出方法，不能用基础版的导出逻辑，否则样式不会被写入文件。

• 解决：
  • 调用XLSX.writeFile(workbook, '导出文件.xlsx', {bookType: 'xlsx'})（确保是扩展库的XLSX对象）

验证流程 #

1. 先导出纯数据文件，确认文本本身存在且正确
2. 逐步添加列宽/行高设置，导出后检查文本显示情况
3. 再逐一添加字体、对齐等样式，验证每一步的生效状态

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