数据写完之后，表格往往还差最后一步才能用：产品名称被窄列挤得只剩几个字，备注里的一整段话铺在一行上、末尾被右侧有内容的单元格截掉。手动拖列宽、拉行高不仅慢，列一多还容易漏掉几列。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成这些操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

本文介绍两个核心功能点：

• 自动调整单行的行高和单列的列宽
• 自动调整多行的行高和多列的列宽

有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。

自动调整单行的行高和单列的列宽

行高由 AutoFitRow 按指定行中的内容自动算出，列宽由 AutoFitColumn 按指定列中的内容自动算出。两者都只作用于目标的那一行、那一列，表格其余部分保持原样，适合只修某一处最碍眼的溢出。具体操作步骤如下：

1. 加载工作簿，获取第一个工作表。
2. 通过 AutoFitRow 自动调整该行的行高。
3. 通过 AutoFitColumn 自动调整该列的列宽。
4. 保存工作簿。

下面是一个完整的代码示例，展示了在 React 中自动调整单行的行高和单列的列宽：

function App() {
  const autoFitSingleRowColumn = async () => {
    // 获取 Spire.XLS WASM 模块
    const xlsModule = window.wasmModule?.spirexls;

    // 检查模块是否就绪
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // 将中文字体载入 VFS
    await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // 将 Excel 文件载入 VFS
    const inputFileName = 'AutoFitRowsAndColumns.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);

    // 加载工作簿
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile(inputFileName);

    // 获取第一个工作表
    const sheet = workbook.Worksheets.get(0);

    // 自动调整第 2 行的行高
    sheet.AutoFitRow(2);

    // 自动调整第 4 列的列宽
    sheet.AutoFitColumn(4);

    // 保存工作簿
    const outputFileName = "AutoFitSingleRowColumn.xlsx";
    workbook.SaveToFile(outputFileName);

    // 释放资源
    workbook.Dispose();

    // 从 VFS 读取结果文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>自动调整单行行高和单列列宽</h1>
      <button onClick={autoFitSingleRowColumn}>Start</button>
    </div>
  );
}

export default App;

运行后，自动调整单行行高和单列列宽的效果：

自动调整多行的行高和多列的列宽

整张表格都要收拾时，逐行逐列调用显然不现实。对一段单元格区域调用 AutoFitRows 或 AutoFitColumns，区域覆盖的每一行、每一列都会各自按内容重新计算尺寸，一次调用就能把整块数据排整齐，适合导出报表前的收尾。具体操作步骤如下：

1. 加载工作簿，获取第一个工作表。
2. 通过 AutoFitRows 自动调整范围内所有行的行高。
3. 通过 AutoFitColumns 自动调整范围内所有列的列宽。
4. 保存工作簿。

下面是一个完整的代码示例，展示了在 React 中自动调整多行的行高和多列的列宽：

function App() {
  const autoFitMultipleRowsColumns = async () => {
    // 获取 Spire.XLS WASM 模块
    const xlsModule = window.wasmModule?.spirexls;

    // 检查模块是否就绪
    if (!xlsModule) {
      alert('Spire.Xls is not ready yet');
      return;
    }

    // 将中文字体载入 VFS
    await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // 将 Excel 文件载入 VFS
    const inputFileName = 'AutoFitRowsAndColumns.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`);

    // 加载工作簿
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile(inputFileName);

    // 获取第一个工作表
    const sheet = workbook.Worksheets.get(0);

    // 获取工作表中已使用的单元格范围
    const range = sheet.AllocatedRange;

    // 自动调整范围内所有行的行高
    range.AutoFitRows();

    // 自动调整范围内所有列的列宽
    range.AutoFitColumns();

    // 保存工作簿
    const outputFileName = "AutoFitMultipleRowsColumns.xlsx";
    workbook.SaveToFile(outputFileName);

    // 释放资源
    workbook.Dispose();

    // 从 VFS 读取结果文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>自动调整多行行高和多列列宽</h1>
      <button onClick={autoFitMultipleRowsColumns}>Start</button>
    </div>
  );
}

export default App;

运行后，自动调整多行行高和多列列宽的效果：

常见问题

调用了 AutoFitRow()，行高却一点没变？

原因：行高自适应只对需要折行的内容起作用。单元格没开自动换行时，文字始终排在一行内，行高跟着字号走，自适应算出来的结果和原行高一致，看上去就像没生效。

解决：先把 WrapText 设为 true，再调用行高自适应：

// 没开自动换行，行高自适应不会带来变化
sheet.Range.get("D2").Style.WrapText = false;
sheet.AutoFitRow(2);

// 开启自动换行后，行高会按折行后的行数重新计算
sheet.Range.get("D2").Style.WrapText = true;
sheet.AutoFitRow(2);

AutoFitColumns() 对合并单元格不起作用？

原因：列宽自适应按区域内单个单元格的内容计算，合并单元格只有左上角那一格真正存放文字，区域内其余位置都是空的，算出来的宽度自然只够放下左上角的内容。

解决：合并单元格的列宽改用 ColumnWidth 手动指定：

// A7:D7 是合并单元格，自适应算不出合并后的总宽度
sheet.Range.get("A7:D7").Merge();
sheet.Range.get("A7:D7").AutoFitColumns();

// 改为手动指定列宽，让合并后的文字完整显示
sheet.Range.get("A7").ColumnWidth = 40;

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。