npm i spire.xls

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;

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;