一份表格好不好读，往往不取决于数据本身，而取决于文字在单元格里怎么摆放。标题需要居中、金额需要靠右、多行说明需要缩进、窄列里的长句需要折行，斜着排列的表头则能在有限的列宽里塞下更多信息。这些都属于单元格文字的排版设置。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成这些操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

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

• 设置文字的对齐方式
• 设置文字的缩进
• 设置文字的方向
• 设置文字的换行

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

设置文字的对齐方式

对齐方式分为两个方向：垂直对齐决定文字在单元格高度上的位置，通过 VerticalAlignment 属性设置，可选 Top、Center、Bottom 等；水平对齐决定文字在单元格宽度上的位置，通过 HorizontalAlignment 属性设置，可选 General、Left、Center、Right 等。两者相互独立，可以任意组合。具体操作步骤如下：

1. 新建工作簿，获取第一个工作表。
2. 写入示例文字。
3. 通过 VerticalAlignment 设置垂直对齐方式。
4. 通过 HorizontalAlignment 设置水平对齐方式。
5. 保存工作簿。

下面是一个完整的代码示例，展示了在 React 中设置单元格文字的对齐方式：

function App() {
  const setTextAlignment = 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/`);

    // 新建工作簿
    const workbook = new xlsModule.Workbook();

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

    // 写入垂直对齐的示例文字
    sheet.Range.get("A1").Text = "对齐方式";
    sheet.Range.get("B1").Text = "示例文字";
    sheet.Range.get("A2").Text = "垂直靠上";
    sheet.Range.get("B2").Text = "VerticalAlignType.Top";
    sheet.Range.get("A3").Text = "垂直居中";
    sheet.Range.get("B3").Text = "VerticalAlignType.Center";
    sheet.Range.get("A4").Text = "垂直靠下";
    sheet.Range.get("B4").Text = "VerticalAlignType.Bottom";

    // 写入水平对齐的示例文字
    sheet.Range.get("A6").Text = "水平常规";
    sheet.Range.get("B6").Text = "HorizontalAlignType.General";
    sheet.Range.get("A7").Text = "水平靠左";
    sheet.Range.get("B7").Text = "HorizontalAlignType.Left";
    sheet.Range.get("A8").Text = "水平居中";
    sheet.Range.get("B8").Text = "HorizontalAlignType.Center";
    sheet.Range.get("A9").Text = "水平靠右";
    sheet.Range.get("B9").Text = "HorizontalAlignType.Right";

    // 设置垂直对齐方式
    sheet.Range.get("B2").Style.VerticalAlignment = xlsModule.VerticalAlignType.Top;
    sheet.Range.get("B3").Style.VerticalAlignment = xlsModule.VerticalAlignType.Center;
    sheet.Range.get("B4").Style.VerticalAlignment = xlsModule.VerticalAlignType.Bottom;

    // 设置水平对齐方式
    sheet.Range.get("B6").Style.HorizontalAlignment = xlsModule.HorizontalAlignType.General;
    sheet.Range.get("B7").Style.HorizontalAlignment = xlsModule.HorizontalAlignType.Left;
    sheet.Range.get("B8").Style.HorizontalAlignment = xlsModule.HorizontalAlignType.Center;
    sheet.Range.get("B9").Style.HorizontalAlignment = xlsModule.HorizontalAlignType.Right;

    // 加宽 B 列、加高第 2~4 行，对齐差异才看得出来
    sheet.Range.get("B1:B9").ColumnWidth = 32;
    sheet.Range.get("A2:B4").RowHeight = 40;

    // 保存工作簿
    const outputFileName = "TextAlignment.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={setTextAlignment}>Start</button>
    </div>
  );
}

export default App;

运行后，设置文字对齐方式的效果：

设置文字的缩进

缩进用于在单元格内部为文字留出左侧（或右侧）的空白，适合「地区 → 城市」这类有层级关系的数据。通过 IndentLevel 属性设置缩进级别，一个级别大约相当于一个字符的宽度。需要注意的是，缩进只在水平对齐为 Left、Right 等非 General 的对齐方式下才会显示，所以通常要和 HorizontalAlignment 一起使用。具体操作步骤如下：

1. 新建工作簿，获取第一个工作表。
2. 写入示例文字。
3. 将水平对齐设为靠左，让缩进生效。
4. 通过 IndentLevel 设置逐级递增的缩进级别。
5. 保存工作簿。

下面是一个完整的代码示例，展示了在 React 中设置单元格文字的缩进：

function App() {
  const setTextIndent = 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/`);

    // 新建工作簿
    const workbook = new xlsModule.Workbook();

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

    // 写入示例文字
    sheet.Range.get("A1").Text = "缩进级别";
    sheet.Range.get("B1").Text = "示例文字";
    sheet.Range.get("A2").Text = "0";
    sheet.Range.get("B2").Text = "全国";
    sheet.Range.get("A3").Text = "1";
    sheet.Range.get("B3").Text = "华北地区";
    sheet.Range.get("A4").Text = "2";
    sheet.Range.get("B4").Text = "北京市";
    sheet.Range.get("A5").Text = "3";
    sheet.Range.get("B5").Text = "海淀区";

    // 缩进需要配合靠左对齐才会生效
    sheet.Range.get("B2:B5").Style.HorizontalAlignment = xlsModule.HorizontalAlignType.Left;

    // 设置文字的缩进级别
    sheet.Range.get("B2").Style.IndentLevel = 0;
    sheet.Range.get("B3").Style.IndentLevel = 1;
    sheet.Range.get("B4").Style.IndentLevel = 2;
    sheet.Range.get("B5").Style.IndentLevel = 3;

    // 加宽 B 列，缩进差异才看得出来
    sheet.Range.get("B1:B5").ColumnWidth = 32;

    // 保存工作簿
    const outputFileName = "Indentation.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={setTextIndent}>Start</button>
    </div>
  );
}

export default App;

运行后，设置文字缩进的效果：

设置文字的方向

文字方向包含两个彼此独立的设置。一是旋转角度，通过 Rotation 属性设置，取值 0 到 90 表示逆时针旋转的角度，-1 到 -90 表示顺时针旋转的角度；旋转常用于在窄列中放置较长的表头。二是阅读方向，通过 ReadingOrder 属性设置，可选 LeftToRight、RightToLeft、Context，它决定单元格内混排文字以哪个方向为基准排列，用于阿拉伯语、希伯来语等从右到左书写的语言。旋转或竖排之后文字占用的高度比原来大得多，因此要同时调大行高，让文字完整落在单元格内。具体操作步骤如下：

1. 新建工作簿，获取第一个工作表。
2. 写入示例文字。
3. 通过 Rotation 设置文字的旋转角度。
4. 通过 ReadingOrder 设置文字的阅读方向。
5. 保存工作簿。

下面是一个完整的代码示例，展示了在 React 中设置单元格文字的方向：

function App() {
  const setTextOrientation = 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/`);

    // 新建工作簿
    const workbook = new xlsModule.Workbook();

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

    // 写入旋转角度的示例文字
    sheet.Range.get("A1").Text = "文字方向";
    sheet.Range.get("B1").Text = "示例文字";
    sheet.Range.get("A2").Text = "逆时针 45 度";
    sheet.Range.get("B2").Text = "Rotation = 45";
    sheet.Range.get("A3").Text = "逆时针 90 度";
    sheet.Range.get("B3").Text = "Rotation = 90";
    sheet.Range.get("A4").Text = "顺时针 45 度";
    sheet.Range.get("B4").Text = "Rotation = -45";
    sheet.Range.get("A5").Text = "竖排文字";
    sheet.Range.get("B5").Text = "Spire";

    // 写入阅读方向的示例文字：拉丁字母与希伯来文混排，方向差异才看得出来
    sheet.Range.get("A7").Text = "从左到右";
    sheet.Range.get("B7").Text = "Spire.XLS שלום";
    sheet.Range.get("A8").Text = "从右到左";
    sheet.Range.get("B8").Text = "Spire.XLS שלום";

    // 设置文字的旋转角度，255 表示竖排（文字自上而下逐字排列）
    sheet.Range.get("B2").Style.Rotation = 45;
    sheet.Range.get("B3").Style.Rotation = 90;
    sheet.Range.get("B4").Style.Rotation = -45;
    sheet.Range.get("B5").Style.Rotation = 255;

    // 设置文字的阅读方向
    sheet.Range.get("B7").Style.ReadingOrder = xlsModule.ReadingOrderType.LeftToRight;
    sheet.Range.get("B8").Style.ReadingOrder = xlsModule.ReadingOrderType.RightToLeft;

    // 加宽 B 列、加高第 2~5 行，旋转与竖排的文字才放得下
    sheet.Range.get("B1:B8").ColumnWidth = 20;
    sheet.Range.get("A2:B5").RowHeight = 60;

    // 保存工作簿
    const outputFileName = "TextOrientation.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={setTextOrientation}>Start</button>
    </div>
  );
}

export default App;

运行后，设置文字方向的效果：

设置文字的换行

当一段文字比列宽更长时，默认会溢出到相邻的空单元格上，一旦相邻单元格有内容就会被截断。把 WrapText 属性设为 true，文字就会在单元格内部自动折行；设为 false 则恢复为不折行。和旋转一样，换行只改变文字的排列方式，不会自动调整行高，所以折行之后一般还要把行高调大，让折行出来的几行都完整显示。具体操作步骤如下：

1. 新建工作簿，获取第一个工作表。
2. 写入一段长文字。
3. 通过 WrapText 开启或关闭自动换行。
4. 调整列宽与行高，让折行效果完整显示。
5. 保存工作簿。

下面是一个完整的代码示例，展示了在 React 中设置单元格文字的换行：

function App() {
  const setTextWrap = 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/`);

    // 新建工作簿
    const workbook = new xlsModule.Workbook();

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

    // 写入示例文字
    sheet.Range.get("A1").Text = "自动换行";
    sheet.Range.get("B1").Text = "示例文字";
    sheet.Range.get("A2").Text = "开启";
    sheet.Range.get("B2").Text = "Spire.XLS for JavaScript 可以在浏览器端为单元格文字设置自动换行。";
    sheet.Range.get("A3").Text = "关闭";
    sheet.Range.get("B3").Text = "Spire.XLS for JavaScript 可以在浏览器端为单元格文字设置自动换行。";

    // 开启自动换行，文字超出列宽时在单元格内折行
    sheet.Range.get("B2").Style.WrapText = true;

    // 关闭自动换行，文字保持在一行内
    sheet.Range.get("B3").Style.WrapText = false;

    // 收窄 B 列并加高第 2~3 行，折行效果才看得出来
    sheet.Range.get("B1:B3").ColumnWidth = 24;
    sheet.Range.get("A2:B3").RowHeight = 60;

    // 保存工作簿
    const outputFileName = "WrapText.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={setTextWrap}>Start</button>
    </div>
  );
}

export default App;

运行后，设置文字换行的效果：

常见问题

设置了 IndentLevel，文字却完全没有缩进？

原因：缩进只在水平对齐为 Left、Right 等非 General 的对齐方式下才会显示。单元格默认是 General 对齐，此时 IndentLevel 的值会被直接忽略，只设缩进自然看不出任何变化。

解决：先设置 HorizontalAlignment，再设置 IndentLevel：

// 缩进需要配合靠左对齐才会生效
sheet.Range.get("B2").Style.HorizontalAlignment = xlsModule.HorizontalAlignType.Left;
sheet.Range.get("B3").Style.HorizontalAlignment = xlsModule.HorizontalAlignType.Left;

// 设置文字的缩进级别
sheet.Range.get("B2").Style.IndentLevel = 1;
sheet.Range.get("B3").Style.IndentLevel = 2;

想让文字竖排（一个字占一行），把 Rotation 设为 90 度为什么不行？

原因：Rotation 的 0 到 90 与 -1 到 -90 两段只在旋转角度上做文章，90 度也只是让文字整个躺倒，并不会把它拆成自上而下的单字排列。

解决：竖排文字要用 255 这个特殊取值：

// 90 度只是把文字旋转 90 度
sheet.Range.get("B2").Style.Rotation = 90;

// 255 表示竖排，文字自上而下逐字排列
sheet.Range.get("B3").Style.Rotation = 255;

获取免费许可证

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