在 React 中使用 JavaScript 合并 Excel 文件

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

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

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

将要合并的工作簿文件路径放入列表中。

创建一个新的 Workbook 对象，并清除其中默认的工作表。

创建一个临时 Workbook 对象。

循环遍历文件路径列表。

使用 Workbook.LoadFromFile() 方法将列表中指定的工作簿加载到临时 Workbook 对象。

循环遍历临时Workbook中的工作表，并使用 XlsWorksheetsCollection.AddCopy() 方法将其中的每个工作表复制到新的Workbook中。

使用 Workbook.SaveToFile() 方法将生成的工作簿保存为新文件。

import React, { useState, useEffect } from 'react'; function App() { const [wasmModule, setWasmModule] = useState(null); // 加载 Spire.XLS useEffect(() => { (async () => { try { const publicUrl = process.env.PUBLIC_URL || ''; const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.xls.js`); const rawModule = spireModule.default || spireModule; window.wasmModule = typeof rawModule === 'function' ? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p }) : rawModule; setWasmModule(window.wasmModule); } catch (error) { console.error('Failed to load spire.xls.js WASM module:', error); } })(); }, []); // 合并 Excel 工作簿的函数 const MergeExcelWorkbooks = async () => { const wasmModule = window.wasmModule.spirexls; if (wasmModule) { // 将字体加载到虚拟文件系统（VFS）中 await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`); // 将 Excel 文件加载到虚拟文件系统 (VFS) const files = [ "文档1.xlsx", "文档2.xlsx", "文档3.xlsx", ]; for (const file of files) { window.spire.FetchFileToVFS(file, '', `${process.env.PUBLIC_URL}/static/data/`); } // 创建一个新的工作簿 const newbook = new wasmModule.Workbook(); newbook.Version = wasmModule.ExcelVersion.Version2013; // 清除默认工作表 newbook.Worksheets.Clear(); // 创建一个临时工作簿 let tempbook = new wasmModule.Workbook(); 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 = window.dotnetRuntime.Module.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(); } }; 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。

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

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

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

创建 Workbook 对象，并使用 Workbook.LoadFromFile() 方法加载 Excel 工作簿。

使用 Workbook.Worksheets.get() 方法获取要合并的两个工作表。

使用 Worksheet.AllocatedRange 属性获取第二个工作表中的数据区域。

使用 Worksheet.Range.get() 方法指定第一个工作表中的目标区域。

使用 CellRange.Copy() 方法将第二个工作表的数据区域复制到第一个工作表中指定的目标区域。

从工作簿中删除第二个工作表。

使用 Workbook.SaveToFile() 方法保存合并后的工作簿。

import React, { useState, useEffect } from 'react'; function App() { const [wasmModule, setWasmModule] = useState(null); // 加载 Spire.XLS useEffect(() => { (async () => { try { const publicUrl = process.env.PUBLIC_URL || ''; const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.xls.js`); const rawModule = spireModule.default || spireModule; window.wasmModule = typeof rawModule === 'function' ? await rawModule({ locateFile: p => p.endsWith('.wasm') ? `${publicUrl}/${p}` : p }) : rawModule; setWasmModule(window.wasmModule); } catch (error) { console.error('Failed to load spire.xls.js WASM module:', error); } })(); }, []); // 合并多个Excel 工作表的函数 const MergeWorksheets = async () => { const wasmModule = window.wasmModule.spirexls; if (wasmModule) { // 将字体加载到虚拟文件系统（VFS）中 await window.spire.FetchFileToVFS('Arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/static/font/`); // 将 Excel 文件加载到虚拟文件系统 (VFS) let inputFileName = '示例.xlsx'; await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/static/data/`); // 创建一个新的工作簿 const workbook = new wasmModule.Workbook(); // 从虚拟文件系统加载 Excel 文件 workbook.LoadFromFile(inputFileName); // 获取第一个工作表 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 = window.dotnetRuntime.Module.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;