在 React 中使用 JavaScript 合并 Excel 文件

合并 Excel 文件是数据处理中的常见任务。随着项目的不断发展，团队成员常常会生成多个电子表格，以记录不同的数据和信息。这时，如何将这些分散的文件整合成一个统一的文档，便于分析和共享，成为了一个亟需解决的问题。无论是处理财务报表、销售数据，还是项目进度表，掌握高效合并 Excel 文件的技巧，不仅可以提高工作效率，也能让数据分析变得更加直观和便捷。这篇文章将介绍如何在 React 项目中使用 JavaScript 和 Spire.XLS for JavaScript 库实现合并 Excel 文件。

将多个 Excel 工作簿合并为一个工作簿
将多个 Excel 工作表合并为一个工作表

安装 Spire.XLS for JavaScript

要在 React 应用程序中实现合并Excel文件，首先需要下载 Spire.XLS for JavaScript，或者通过 npm 进行安装：

npm i spire.xls

安装完成后，将 Spire.Xls.Base.js 和 Spire.Xls.Base.wasm 文件复制到项目的 public 文件夹中。此外，为确保文本的正确呈现，还需要添加所需的字体文件。

详细的安装和配置步骤，请参考此教程：如何在 React 项目中集成 Spire.XLS for JavaScript

将多个 Excel 工作簿合并为一个工作簿

通过合并多个 Excel 工作簿，你可以将各个文件整合为一个文档，这样不仅提高了数据的可读性，还使得信息的分析和共享变得更加高效，便于团队协作和决策。

使用 Spire.XLS for JavaScript，开发人员可以通过 XlsWorksheetsCollection.AddCopy() 方法，将源工作簿中的工作表复制到新的工作簿，从而实现多个工作簿的合并。主要步骤如下：

将要合并的工作簿文件路径放入列表中。
创建一个新的 Workbook 对象，并清除其中默认的工作表。
创建一个临时 Workbook 对象。
循环遍历文件路径列表。
使用 Workbook.LoadFromFile() 方法将列表中指定的工作簿加载到临时 Workbook 对象。
循环遍历临时Workbook中的工作表，并使用 XlsWorksheetsCollection.AddCopy() 方法将其中的每个工作表复制到新的Workbook中。
使用 Workbook.SaveToFile() 方法将生成的工作簿保存为新文件。

JavaScript

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

function App() {

  // 保存已加载的WASM模块
  const [wasmModule, setWasmModule] = useState(null);

  // 在组件挂载时加载WASM模块
  useEffect(() => {
    const loadWasm = async () => {
      try {

        // 通过全局窗口对象访问模块和spirexls
        const { Module, spirexls } = window;

        // 在初始化运行时设置wasmModule状态
        Module.onRuntimeInitialized = () => {
          setWasmModule(spirexls);
        };
      } catch (err) {

        // 记录加载过程中出现的任何错误
        console.error('加载 WASM 模块失败:', err);
      }
    };

    // 创建一个script元素来加载WASM JavaScript文件
    const script = document.createElement('script');
    script.src = `${process.env.PUBLIC_URL}/Spire.Xls.Base.js`;
    script.onload = loadWasm;

    // 将script添加到文档的body中
    document.body.appendChild(script);

    // 在组件卸载时执行删除script的清理函数
    return () => {
      document.body.removeChild(script);
    };
  }, []); 

  // 合并 Excel 工作簿的函数
  const MergeExcelWorkbooks = async () => {
    if (wasmModule) {
      // 将 ARIALUNI.TTF 字体文件加载到虚拟文件系统 (VFS)
      await wasmModule.FetchFileToVFS('ARIALUNI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
      
      // 将 Excel 文件加载到虚拟文件系统 (VFS)
      const files = [
        "文档1.xlsx",
        "文档2.xlsx",
        "文档3.xlsx",
      ];
      for (const file of files) {
        await wasmModule.FetchFileToVFS(file, "", `${process.env.PUBLIC_URL}/`);
      }
      
      // 创建一个新的工作簿
      let newbook = wasmModule.Workbook.Create();
      newbook.Version = wasmModule.ExcelVersion.Version2013;
      // 清除默认工作表
      newbook.Worksheets.Clear();
      
      // 创建一个临时工作簿
      let tempbook = wasmModule.Workbook.Create();

      for (const file of files) {
        // 加载当前文件
        tempbook.LoadFromFile(file.split("/").pop());

        for (let i = 0; i < tempbook.Worksheets.Count; i++) {
          let sheet = tempbook.Worksheets.get(i);
          // 将当前文件中的每个工作表复制到新工作簿
          wasmModule.XlsWorksheetsCollection.Convert(
            newbook.Worksheets
          ).AddCopy({
            sheet: sheet,
            flags: wasmModule.WorksheetCopyType.CopyAll,
          });
        }
      }

      let outputFileName = "合并工作簿.xlsx";
      // 保存生成的文件
      newbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2013 });
      
      // 读取保存的文件并转换为 Blob 对象
      const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
      const modifiedFile = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      
      // 为 Blob 创建 URL 并启动下载
      const url = URL.createObjectURL(modifiedFile);
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);
      a.click(); 
      document.body.removeChild(a); 
      URL.revokeObjectURL(url); 

      // 清理工作簿使用的资源
      newbook.Dispose();
      tempbook.Dispose();
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>使用 JavaScript 在 React 中合并多个 Excel 工作簿为一个</h1>
      <button onClick={MergeExcelWorkbooks} disabled={!wasmModule}>
        合并
      </button>
    </div>
  );
}

export default App;

React 应用程序编译成功后，将在默认网页浏览器中打开，通常是 http://localhost:3000。

React 应用程序编译成功

点击“合并”，就能下载合并后的Excel工作簿。下图展示了本示例中的输入工作簿和合并后的工作簿：

将多个 Excel 工作簿合并为一个工作簿

将多个 Excel 工作表合并为一个工作表

将多个工作表合并为一个工作表不仅能提升信息的清晰度，还能提供更全面的相关数据视图。使用 Spire.XLS for JavaScript，开发人员可以利用 CellRange.Copy() 方法，将数据区域从不同的工作表复制到同一个工作表中，从而实现数据合并。主要步骤如下：

创建 Workbook 对象，并使用 Workbook.LoadFromFile() 方法加载 Excel 工作簿。
使用 Workbook.Worksheets.get() 方法获取要合并的两个工作表。
使用 Worksheet.AllocatedRange 属性获取第二个工作表中的数据区域。
使用 Worksheet.Range.get() 方法指定第一个工作表中的目标区域。
使用 CellRange.Copy() 方法将第二个工作表的数据区域复制到第一个工作表中指定的目标区域。
从工作簿中删除第二个工作表。
使用 Workbook.SaveToFile() 方法保存合并后的工作簿。

JavaScript

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

function App() {

  // 保存已加载的WASM模块
  const [wasmModule, setWasmModule] = useState(null);

  // 在组件挂载时加载WASM模块
  useEffect(() => {
    const loadWasm = async () => {
      try {

        // 通过全局窗口对象访问模块和spirexls
        const { Module, spirexls } = window;

        // 在初始化运行时设置wasmModule状态
        Module.onRuntimeInitialized = () => {
          setWasmModule(spirexls);
        };
      } catch (err) {

        // 记录加载过程中出现的任何错误
        console.error('加载 WASM 模块失败:', err);
      }
    };

    // 创建一个script元素来加载WASM JavaScript文件
    const script = document.createElement('script');
    script.src = `${process.env.PUBLIC_URL}/Spire.Xls.Base.js`;
    script.onload = loadWasm;

    // 将script添加到文档的body中
    document.body.appendChild(script);

    // 在组件卸载时执行删除script的清理函数
    return () => {
      document.body.removeChild(script);
    };
  }, []); 

  // 合并 多个Excel 工作表的函数
  const MergeWorksheets = async () => {
    if (wasmModule) {     
      // 将示例 Excel 文件加载到虚拟文件系统 (VFS)
      let excelFileName = '示例.xlsx';
      await wasmModule.FetchFileToVFS(excelFileName, '', `${process.env.PUBLIC_URL}`);

      // 创建一个新的工作簿
      const workbook = wasmModule.Workbook.Create();

      // 从虚拟文件系统加载 Excel 文件
      workbook.LoadFromFile(excelFileName);

      // 获取第一个工作表
      let sheet1 = workbook.Worksheets.get(0);
      // 获取第二个工作表
      let sheet2 = workbook.Worksheets.get(1);

      // 获取第二个工作表中所使用的数据区域
      let fromRange = sheet2.AllocatedRange;
      // 指定第一个工作表中的目标区域
      let toRange = sheet1.Range.get({row: sheet1.LastRow + 1, column: 1});

      // 将第二个工作表的数据区域复制到第一个工作表的目标区域
      fromRange.Copy({ destRange: toRange });

      // 删除第二个工作表
      sheet2.Remove();

      // 定义输出文件名
      const outputFileName = "合并工作表.xlsx";

      // 将工作簿保存到指定路径
      workbook.SaveToFile({ fileName: outputFileName, version: wasmModule.ExcelVersion.Version2010 });

      // 读取保存的文件并转换为 Blob 对象
      const modifiedFileArray = wasmModule.FS.readFile(outputFileName);
      const modifiedFile = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      
      // 为 Blob 创建 URL 并启动下载
      const url = URL.createObjectURL(modifiedFile);
      const a = document.createElement('a');
      a.href = url;
      a.download = outputFileName;
      document.body.appendChild(a);
      a.click(); 
      document.body.removeChild(a); 
      URL.revokeObjectURL(url); 

      // 清理工作簿使用的资源
      workbook.Dispose();
    }
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>使用 JavaScript 在 React 中合并多个 Excel 工作表为一个</h1>
      <button onClick={MergeWorksheets} disabled={!wasmModule}>
        合并
      </button>
    </div>
  );
}

export default App;

将多个 Excel 工作表合并为一个工作表

申请临时 License

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

返回顶部