Excel 单元格中存储的数值往往需要以不同的格式显示，例如保留两位小数、添加千位分隔符、以货币形式显示金额、用红色突出负数、按百分比或科学计数法展示等。合理的数字格式不仅让报表更易读，还能避免手动录入和排版错误。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成此操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

Spire.XLS for JavaScript 通过单元格区域 Range 的 NumberFormat 属性来设置数字格式。NumberFormat 接受 Excel 标准的格式代码字符串，下表列出常用的格式代码符号及其含义：

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

• 设置小数位数和千位分隔符
• 设置货币格式并突出显示负数
• 设置百分比、科学计数法等特殊格式

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

设置小数位数和千位分隔符

在处理金额、统计等数据时，常常需要把数值统一保留到指定位数的小数，或加上千位分隔符便于阅读。同一组数值按不同的格式代码呈现，读起来会更整齐，也能避免手工补零或补逗号带来的错误。

具体操作步骤如下：

1. 将字体文件载入 VFS，供文本度量使用。
2. 创建 Workbook 对象，并通过 Workbook.Worksheets.get(0) 取得第一张工作表。
3. 使用 Range.Text 属性写入标题、列标题以及作为说明文字的格式代码。
4. 使用 Range.NumberValue 属性写入数值，并使用 Range.NumberFormat 属性设置对应的数字格式代码。
5. 通过 Workbook.SaveToFile() 方法保存工作簿，并用 Workbook.Dispose() 释放资源。

下面是一个完整的代码示例，展示了在 React 中为单元格设置不同小数位数和千位分隔符的数字格式：

function App() {
  const setDecimalPlacesAndThousands = 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("B1").Text = "数字格式设置示例";
    sheet.Range.get("B3").Text = "格式代码";
    sheet.Range.get("C3").Text = "显示结果";

    // 在 B 列写入格式代码，在 C 列写入数值并设置相应的数字格式
    sheet.Range.get("B4").Text = "0";
    sheet.Range.get("C4").NumberValue = 1234.5678;
    sheet.Range.get("C4").NumberFormat = "0";

    sheet.Range.get("B5").Text = "0.00";
    sheet.Range.get("C5").NumberValue = 1234.5678;
    sheet.Range.get("C5").NumberFormat = "0.00";

    sheet.Range.get("B6").Text = "#,##0.00";
    sheet.Range.get("C6").NumberValue = 1234.5678;
    sheet.Range.get("C6").NumberFormat = "#,##0.00";

    // 为格式代码单元格添加底色并设置列宽
    sheet.Range.get("B4:B6").Style.KnownColor = xlsModule.ExcelColors.Gray25Percent;
    sheet.SetColumnWidth(2, 26);
    sheet.SetColumnWidth(3, 20);

    // 保存文档
    const outputFileName = 'NumberFormat_Decimals_output.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // 释放资源
    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>Set Decimal Places and Thousands Separator</h1>
      <button onClick={setDecimalPlacesAndThousands}>
        Start
      </button>
    </div>
  );
}

export default App;

设置小数位数和千位分隔符后的工作表：

设置货币格式并突出显示负数

财务报表中，金额通常以货币格式显示，而负数需要被突出显示才便于快速发现。Excel 的数字格式代码可以由分号分隔的多部分组成，同一列数字因此能分别规定正数与负数的显示方式，负数还可以单独着色。

具体操作步骤如下：

1. 将字体文件载入 VFS，供文本度量使用。
2. 创建 Workbook 对象，并通过 Workbook.Worksheets.get(0) 取得第一张工作表。
3. 使用 Range.Text 属性写入标题、列标题和带货币符号的格式代码说明。
4. 使用 Range.NumberValue 属性写入数值（含负数），并使用 Range.NumberFormat 属性设置带负数部分的格式代码。
5. 通过 Workbook.SaveToFile() 方法保存工作簿，并用 Workbook.Dispose() 释放资源。

下面是一个完整的代码示例，展示了在 React 中为金额设置货币格式并让负数显示为红色：

function App() {
  const setCurrencyFormat = 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("B1").Text = "数字格式设置示例";
    sheet.Range.get("B3").Text = "格式代码";
    sheet.Range.get("C3").Text = "显示结果";

    // 设置货币格式：保留两位小数并带千位分隔符
    sheet.Range.get("B4").Text = "$#,##0.00";
    sheet.Range.get("C4").NumberValue = 1234.5678;
    sheet.Range.get("C4").NumberFormat = "$#,##0.00";

    // 负数带千位分隔符并显示为红色
    sheet.Range.get("B5").Text = "#,##0.00;[Red]-#,##0.00";
    sheet.Range.get("C5").NumberValue = -1234.5678;
    sheet.Range.get("C5").NumberFormat = "#,##0.00;[Red]-#,##0.00";

    // 负数保留两位小数并显示为红色
    sheet.Range.get("B6").Text = "0.00;[Red]-0.00";
    sheet.Range.get("C6").NumberValue = -1234.5678;
    sheet.Range.get("C6").NumberFormat = "0.00;[Red]-0.00";

    // 为格式代码单元格添加底色并设置列宽
    sheet.Range.get("B4:B6").Style.KnownColor = xlsModule.ExcelColors.Gray25Percent;
    sheet.SetColumnWidth(2, 26);
    sheet.SetColumnWidth(3, 20);

    // 保存文档
    const outputFileName = 'NumberFormat_Currency_output.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // 释放资源
    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>Set Currency Format and Highlight Negative Values</h1>
      <button onClick={setCurrencyFormat}>
        Start
      </button>
    </div>
  );
}

export default App;

设置货币格式并突出显示负数后的工作表：

设置百分比、科学计数法等特殊格式

除了常规的小数、千位分隔符和货币格式外，报表中还常遇到百分比、科学计数法与中文大写金额。百分比便于比较占比，科学计数法适合展示极大或极小的数值，中文大写则用于财务票据等正式场合。

具体操作步骤如下：

1. 将字体文件载入 VFS，供文本度量使用。
2. 创建 Workbook 对象，并通过 Workbook.Worksheets.get(0) 取得第一张工作表。
3. 使用 Range.Text 属性写入标题、列标题和格式代码说明。
4. 使用 Range.NumberValue 属性写入数值，并使用 Range.NumberFormat 属性分别设置百分比、科学计数法或中文大写的格式代码。
5. 通过 Workbook.SaveToFile() 方法保存工作簿，并用 Workbook.Dispose() 释放资源。

下面是一个完整的代码示例，展示了在 React 中为单元格设置百分比、科学计数法和中文大写格式：

function App() {
  const setSpecialNumberFormat = 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("B1").Text = "数字格式设置示例";
    sheet.Range.get("B3").Text = "格式代码";
    sheet.Range.get("C3").Text = "显示结果";

    // 百分比格式：存储值乘以 100 后显示百分号
    sheet.Range.get("B4").Text = "0.00%";
    sheet.Range.get("C4").NumberValue = 0.1234;
    sheet.Range.get("C4").NumberFormat = "0.00%";

    // 科学计数法格式
    sheet.Range.get("B5").Text = "0.00E+00";
    sheet.Range.get("C5").NumberValue = 123456789;
    sheet.Range.get("C5").NumberFormat = "0.00E+00";

    // 中文大写格式（人民币财务大写）
    sheet.Range.get("B6").Text = "[DBNum2][$-804]General";
    sheet.Range.get("C6").NumberValue = 1234567;
    sheet.Range.get("C6").NumberFormat = "[DBNum2][$-804]General";

    // 为格式代码单元格添加底色并设置列宽
    sheet.Range.get("B4:B6").Style.KnownColor = xlsModule.ExcelColors.Gray25Percent;
    sheet.SetColumnWidth(2, 26);
    sheet.SetColumnWidth(3, 20);

    // 保存文档
    const outputFileName = 'NumberFormat_Special_output.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // 释放资源
    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>Set Percent, Scientific Notation and Other Formats</h1>
      <button onClick={setSpecialNumberFormat}>
        Start
      </button>
    </div>
  );
}

export default App;

设置百分比、科学计数法等特殊格式后的工作表：

常见问题

设置了数字格式，但数值显示没有变化

原因：写入单元格的数值实际上是以文本形式存储的，或者数据本身不是数值类型，导致 NumberFormat 无法作用在数字上。

解决：确保使用 Range.NumberValue 属性写入数值（而不是 Text 或 Value 字符串），再设置 NumberFormat，例如：

sheet.Range.get("C4").NumberValue = 1234.5678;
sheet.Range.get("C4").NumberFormat = "0.00";

使用百分比格式后数值被放大了

原因：Excel 的百分比格式会按照"存储值 × 100"的方式显示。例如存储值 12.34 配合 0.00% 格式会显示为 1234.00%，而不是 12.34%。

解决：若要显示 12.34%，存储的值应当是 0.1234；若原始数据是以百分比数值录入的，应先除以 100 再设置格式。

负数没有按设置显示为红色

原因：格式代码只有一个区段时，正数、负数和零都会套用同一个区段，写在其中的 [Red] 也会作用于所有数值；只有把颜色代码放进负数区段，负数才会单独着色。

解决：用分号把正数与负数拆成两个区段，并把 [Red] 放在负数区段，例如 0.00;[Red]-0.00。

获取免费许可证

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