在 Web 应用中直接读取 Excel 文件适用于多种场景，例如在网页上展示电子表格数据、导入业务记录、分析工作表内容，或提取特定数据供后续处理。在 React 应用中，开发者还可能需要区分 Excel 中不同的数据类型，包括文本、数字、公式、日期和布尔值。

Spire.XLS for JavaScript 提供了用于在 JavaScript 应用中加载和操作 Excel 文件的 API。借助该库，无需安装 Microsoft Excel，即可访问工作表和单元格、获取不同类型的单元格值，并提取嵌入的图片。本文演示如何在 React 中使用 JavaScript 读取 Excel 文件，包括读取工作表数据、获取不同类型的单元格值，以及提取图片。

本文内容：

• 在 React 项目中安装 Spire.XLS for JavaScript
• 在 React 中使用 JavaScript 读取 Excel 数据
• 读取 Excel 中不同类型的单元格数据
• 读取 Excel 工作表中的图片
• 总结
• 常见问题

在 React 项目中安装 Spire.XLS for JavaScript

在处理 Excel 文件之前，请先在 React 项目中安装 Spire.XLS for JavaScript。

在项目目录中打开终端，并运行以下命令：

npm i spire.office

安装完成后，将所需的 Spire.XLS JavaScript 文件和 WebAssembly 运行时文件复制到 React 项目的 public 目录中。

有关配置该库及其 WebAssembly 运行时的详细说明，请参阅：如何在 React 项目中集成 Spire.XLS for JavaScript。

完成运行时配置后，即可将 Excel 文件加载到 Spire 虚拟文件系统中，并在浏览器中进行处理。

在 React 中使用 JavaScript 读取 Excel 数据

读取 Excel 文件时，一项常见需求是获取工作表中所有已使用区域的数据，并将其展示在 Web 界面中。

Spire.XLS 提供 AllocatedRange 属性，用于获取当前已使用的单元格区域。随后，可以遍历该区域的行和列，读取各个单元格的值。

主要步骤如下：

1. 加载并初始化 Spire.XLS WebAssembly 模块。
2. 将 Excel 文件加载到 Spire 虚拟文件系统中。
3. 创建 Workbook 对象并加载 Excel 文件。
4. 访问目标工作表。
5. 获取工作表的已使用区域。
6. 遍历单元格并读取其值。
7. 将提取的值存储到 React 状态中，并以 HTML 表格形式展示。

以下示例读取名为 Data.xlsx 的 Excel 文件中第一个工作表的数据，并将获取的值展示在 React 表格中。

import React, { useState, useEffect } from 'react';

function App() {
  const [wasmModule, setWasmModule] = useState(null);
  const [tableData, setTableData] = useState([]);
  const [status, setStatus] = useState('Loading Excel runtime...');
  const [error, setError] = useState('');

  useEffect(() => {
    (async () => {
      try {
        const publicUrl = process.env.PUBLIC_URL || '';
        const spireModule = await import(
          /* webpackIgnore: true */
          `${publicUrl}/spire.xls.js`
        );

        const xlsModule = spireModule.spirexls || window.spirexls;

        if (!xlsModule) {
          throw new Error('Spire XLS module was not initialized.');
        }

        window.wasmModule = xlsModule;
        setWasmModule(xlsModule);
        setStatus('Excel runtime ready.');
      } catch (err) {
        console.error('Failed to load Spire XLS runtime:', err);
        setError(err.message || 'Failed to load Spire XLS runtime.');
        setStatus('');
      }
    })();
  }, []);

  const loadExcelToVfs = async (fileName) => {
    const publicUrl = process.env.PUBLIC_URL || '';
    const response = await fetch(`${publicUrl}/${fileName}`);

    if (!response.ok) {
      throw new Error(
        `Failed to load ${fileName}: ${response.status} ${response.statusText}`
      );
    }

    if (!window.dotnetRuntime?.Module?.FS) {
      throw new Error('Spire virtual file system is not ready.');
    }

    const fileBytes = new Uint8Array(await response.arrayBuffer());

    window.dotnetRuntime.Module.FS.writeFile(
      fileName,
      fileBytes,
      { flags: 'w+' }
    );

    return fileName;
  };

  const readExcelData = async () => {
    if (!wasmModule) {
      setError('Excel runtime is not ready yet.');
      return;
    }

    setError('');
    setStatus('Reading Excel file...');

    const workbook = new wasmModule.Workbook();

    try {
      const inputFile = await loadExcelToVfs('Data.xlsx');
      workbook.LoadFromFile(inputFile);

      const sheet = workbook.Worksheets.get(0);
      const range = sheet.AllocatedRange;
      const rows = [];

      if (range) {
        const firstRow = range.Row;
        const firstColumn = range.Column;

        const lastRow =
          range.LastRow || firstRow + range.RowCount - 1;

        const lastColumn =
          range.LastColumn || firstColumn + range.ColumnCount - 1;

        for (let r = firstRow; r <= lastRow; r++) {
          const row = [];

          for (let c = firstColumn; c <= lastColumn; c++) {
            row.push(sheet.get(r, c).Value);
          }

          rows.push(row);
        }
      }

      setTableData(rows);
      setStatus(`Loaded ${rows.length} rows.`);
    } catch (err) {
      console.error('Failed to read Excel file:', err);
      setError(err.message || 'Failed to read Excel file.');
      setStatus('');
    } finally {
      workbook.Dispose();
    }
  };

  return (
    <div style={{ textAlign: 'center', padding: 30 }}>
      <h1>Read Excel in JavaScript</h1>

      <button onClick={readExcelData} disabled={!wasmModule}>
        Read Excel File
      </button>

      {status && <p>{status}</p>}

      {error && (
        <p style={{ color: 'crimson' }}>
          {error}
        </p>
      )}

      {tableData.length > 0 && (
        <table
          border="1"
          cellPadding="8"
          style={{
            margin: '20px auto',
            borderCollapse: 'collapse'
          }}
        >
          <tbody>
            {tableData.map((row, ri) => (
              <tr key={ri}>
                {row.map((cell, ci) => (
                  <td key={ci}>{cell}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

export default App;

代码说明

示例首先动态加载 Spire.XLS JavaScript 运行时：

const spireModule = await import(
  /* webpackIgnore: true */
  `${publicUrl}/spire.xls.js`
);

const xlsModule = spireModule.spirexls || window.spirexls;

由于 Spire.XLS 使用 WebAssembly 运行时，因此需要将源 Excel 文件加载到其虚拟文件系统中：

const fileBytes = new Uint8Array(await response.arrayBuffer());

window.dotnetRuntime.Module.FS.writeFile(
  fileName,
  fileBytes,
  { flags: 'w+' }
);

接着，创建 Workbook 对象并加载 Excel 文件：

const workbook = new wasmModule.Workbook();
workbook.LoadFromFile(inputFile);

通过以下代码访问第一个工作表：

const sheet = workbook.Worksheets.get(0);

为避免遍历不必要的空单元格，示例通过 AllocatedRange 获取工作表的已使用区域：

const range = sheet.AllocatedRange;

然后，根据该区域确定起始行、结束行、起始列和结束列，并通过嵌套循环访问各个单元格：

for (let r = firstRow; r <= lastRow; r++) {
  const row = [];

  for (let c = firstColumn; c <= lastColumn; c++) {
    row.push(sheet.get(r, c).Value);
  }

  rows.push(row);
}

最后，将生成的二维数组存储到 React 的 tableData 状态中，并渲染为 HTML 表格。

这种方式适用于构建电子表格查看器、Excel 导入界面、报表页面，以及其他需要直接在浏览器中展示工作表数据的应用。

读取 Excel 中不同类型的单元格数据

Excel 单元格可以包含不同类型的数据。根据需要获取的内容，Spire.XLS 提供了不同的属性或方法，用于访问单元格的底层值。

下表列出了一些常用选项：

例如，先访问某个指定的单元格：

const cell = sheet.get(rowIndex, colIndex);

然后，根据预期的数据类型获取其内容。

读取文本

使用 Text 属性获取单元格的文本表示形式：

const text = sheet.get(rowIndex, colIndex).Text;

当需要获取单元格显示的文本内容时，可以使用该属性。

读取数字

使用 NumberValue 获取数值：

const number = sheet.get(rowIndex, colIndex).NumberValue;

如果需要在 JavaScript 中使用工作表数据进行计算或数值处理，可以使用该属性。

读取公式和公式结果

Excel 单元格可能包含公式，而不是静态值。可以通过 Formula 属性获取公式表达式：

const formula = sheet.get(rowIndex, colIndex).Formula;

例如，公式单元格可能包含以下表达式：

=SUM(B2:B10)

如果需要获取公式的计算结果，而非公式表达式，请使用：

const formulaResult = sheet.get(rowIndex, colIndex).FormulaValue;

能够同时获取公式及其结果，有助于构建电子表格分析和审计应用。

读取日期

Excel 以一种特殊的单元格值存储日期和时间信息。可以使用以下代码获取：

const date = sheet.get(rowIndex, colIndex).DateTimeValue;

随后，可以根据 React 应用的需求，对返回的日期值进行格式化或处理。

读取布尔值

对于包含 TRUE 或 FALSE 等布尔值的单元格，请使用：

const bool = sheet.get(rowIndex, colIndex).BooleanValue;

读取通用单元格值

当单元格可能包含数字或文本时，Value 属性提供了一种便捷的通用读取方式：

const value = sheet.get(rowIndex, colIndex).Value;

对于日期、布尔值或其他底层 Excel 数据类型，也可以使用 Value2：

const value = sheet.get(rowIndex, colIndex).Value2;

根据预期的 Excel 数据类型选择合适的属性，有助于在 JavaScript 中处理工作表内容时保留数据原本的含义。

读取 Excel 工作表中的图片

除了单元格数据，Excel 工作表还可以包含嵌入的图片。Spire.XLS for JavaScript 允许通过工作表的 Pictures 集合访问这些图片。

以下示例获取工作表中的第一张图片，并将其保存为 PNG 文件：

let pic = sheet.Pictures.get(0);

const outputFileName = 'ReadImages-out.png';

pic.Picture.Save(outputFileName);

由于图片保存在 Spire WebAssembly 虚拟文件系统中，因此可以将其读回 JavaScript：

const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);

接着，根据获取的图片数据创建 JavaScript Blob 对象：

const modifiedFile = new Blob(
  [modifiedFileArray],
  { type: 'image/png' }
);

生成的 Blob 可用于后续的浏览器端操作。例如，可以创建对象 URL，并在 React 组件中直接显示提取的图片：

const imageUrl = URL.createObjectURL(modifiedFile);

然后，将生成的 URL 用作 HTML 图片元素的源地址：

<img src={imageUrl} alt="Extracted from Excel" />

如果工作表包含多张图片，可以遍历 Pictures 集合，逐一处理各张图片。

这一功能适用于需要提取 Excel 工作表中嵌入的产品图片、徽标、以图片形式保存的图表、文档素材或其他视觉内容的应用。相关详细介绍，请参考: 使用 JavaScript 提取工作表中的所有图片

总结

在 React 中读取 Excel 文件，可以将电子表格数据直接引入浏览器端工作流。借助 Spire.XLS for JavaScript，开发者无需依赖 Microsoft Excel，即可加载 Excel 工作簿、访问工作表及其已使用区域、遍历单元格并读取数据。

除了通用单元格值，Spire.XLS 还允许 JavaScript 应用获取文本、数字、公式、公式结果、日期和布尔值等特定类型的数据。此外，也可以提取工作表中嵌入的图片，并将其转换为浏览器兼容的对象，以便显示或进一步处理。

这些功能可用于构建 Excel 查看器、数据导入工具、报表系统、电子表格分析界面，以及其他需要处理 Excel 内容的 React 应用。

常见问题

JavaScript 能在 React 应用中读取 Excel 文件吗？

可以。借助 Spire.XLS for JavaScript 等 Excel 处理库，JavaScript 可以在 React 中读取 Excel 文件。将 Excel 文件加载到 WebAssembly 虚拟文件系统后，即可直接在浏览器中访问其工作表、单元格、公式、图片及其他电子表格内容。

如何读取 Excel 工作表中所有已使用的单元格？

可以使用工作表的 AllocatedRange 属性确定包含数据的区域。获取起始行、结束行、起始列和结束列后，遍历该区域，并通过以下方法访问各个单元格：

sheet.get(rowIndex, colIndex)

这样可以避免不必要地遍历工作表中大范围的空单元格。

如何分别读取 Excel 公式及其计算结果？

使用 Formula 属性获取公式表达式：

const formula = sheet.get(rowIndex, colIndex).Formula;

需要获取公式的计算结果时，使用 FormulaValue：

const result = sheet.get(rowIndex, colIndex).FormulaValue;

这样就可以同时检查公式逻辑及其计算结果。

可以使用 JavaScript 从 Excel 中提取图片吗？

可以。工作表中嵌入的图片可通过 Pictures 集合访问。获取图片后，可以将其保存到 Spire 虚拟文件系统中，读取生成的图片字节，并将其转换为 JavaScript Blob 对象。随后，可以在浏览器中显示、下载或进一步处理该对象。

获取免费许可证

如果您需要去除生成文档中的评估提示或解除功能限制，请联系我们获取有效期 30 天的临时许可证。