合并 Excel 文件是数据处理中的常见任务。随着项目的不断发展，团队成员常常会生成多个电子表格，以记录不同的数据和信息。这时，如何将这些分散的文件整合成一个统一的文档，便于分析和共享，成为了一个亟需解决的问题。无论是处理财务报表、销售数据，还是项目进度表，掌握高效合并 Excel 文件的技巧，不仅可以提高工作效率，也能让数据分析变得更加直观和便捷。这篇文章将介绍如何在 React 项目中使用 JavaScript 和 Spire.XLS for JavaScript 库实现合并 Excel 文件。
安装 Spire.XLS for JavaScript
要在 React 应用程序中实现合并Excel文件，首先需要下载 Spire.XLS for JavaScript，或者通过 npm 进行安装：
npm i spire.office下载的产品包整合了Spire.Doc for JavaScript，Spire.XLS for JavaScript，Spire.PDF for JavaScript，Spire.Presentation for JavaScript，使用Spire.XLS for JavaScript的功能需将相应（ spire.xls.js，Spire.Xls.Wasm.zip，spire.common.js，Spire.Common.Wasm.zip，_framework 文件复制到项目的 public 文件夹中。同时为了确保文本渲染，相关使用字体文件可自定义路径添加。以下示例中，字体添加路径为：public\static\font。
详细的安装和配置步骤，请参考此教程：如何在 React 项目中集成 Spire.XLS for JavaScript
将多个 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( `${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;
申请临时 License
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
