在公司级前端项目中。处理 Excel 文件往往会遇到以下痛点：

• 业务需求经常要求将多个报表或工作表合并，却不想把敏感数据上传到后端。怎么说呢，
• 传统的服务器端库体积大、部署复杂。导致前端团队难以快速迭代。
• 大文件合并时浏览器容易出现卡顿或内存泄漏。
• 不同浏览器对文件读取、字体渲染的兼容性参差不齐。

这篇文章基于 React 与 WebAssembly技术。提供一种全前端、无需后端介入的 Excel 合并方案，并针对上述痛点给出实战实现。

前置环境配置

该方案依赖于 Spire.Office 的 WASM 模块，需要在 React 项目中完成安装与初始化加载。

安装依赖：

npm i spire.office

安装完成后将 node_modules/spire.office 目录中的 spire.xls.js 和 spire.xls.wasm 两个文件复制到项目的 public 目录下。老实说，

在 React 组件中动态加载 WASM 模块：

import React。{ useState,useEffect } from 'react';function App {
const = useState;useEffect => {
=> {
try {
const publicUrl = process.env.PUBLIC_URL || '';const spireModule = await import;const rawModule = spireModule.default || spireModule;window.wasmModule = typeof rawModule === 'function'
await rawModule?`${publicUrl}/${p}` : p })
: rawModule;setWasmModule;} catch {
console.error;}
})，},);// 后续操作...
}

模块加载完成后可通过 window.wasmModule.spirexls 调用所有 Excel 操作接口。话说回来，

再看场景一，将多个 Excel 工作簿合并为一个文件

业务痛点：不同部门、不同时间段导出的报表需要统一汇总。每个报表保持独立 Sheet，避免手动复制粘贴导致的数据错位与版本冲突。

实现思路

1. 创建一个空工作簿作为合并目标。
2. 逐个加载源文件到临时工作簿对象。
3. 遍历临时工作簿中的每个工作表，通过 AddCopy 将其复制到目标工作簿。
4. 将合并结果保存为 Blob 并触发下载。

关键代码

const MergeExcelWorkbooks = async => {
const wasmModule = window.wasmModule.spirexls;if return，// 将必需字体加载到虚拟文件程序，防止中文乱码
await window.spire.FetchFileToVFS;// 待合并的文件列表
const files =;// 把所有源文件预先写入 VFS
files.forEach(file => {
window.spire.FetchFileToVFS;})，// 创建目标工作簿
const newBook = new wasmModule.Workbook;newBook.Version = wasmModule.ExcelVersion.Version2013;newBook.Worksheets.Clear;// 移除默认 Sheet
// 临时工作簿对象，用于逐个读取源文件
let tempBook = new wasmModule.Workbook;for {
tempBook.LoadFromFile;for {
const sheet = tempBook.Worksheets.get;// 将当前 Sheet 完整复制到新工作簿
wasmModule.XlsWorksheetsCollection.Convert.AddCopy({
sheet。flags: wasmModule.WorksheetCopyType.CopyAll,});}
tempBook.Dispose;// 防止内存累计
tempBook = new wasmModule.Workbook;// 重置为新实例
}
const outputFileName = '合并工作簿.xlsx';// 保存至 VFS 并读取二进制数据
newBook.SaveToFile;const arrayBuffer = window.dotnetRuntime.Module.FS.readFile;const blob = new Blob(,{
type这方面。'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',});// 下载触发
const url = URL.createObjectURL;const a = document.createElement;a.href = url;a.download = outputFileName;document.body.appendChild;a.click，document.body.removeChild;
URL.revokeObjectURL;说起来，// 清理资源，防止长时间使用后内存泄漏
newBook.Dispose;}，

再看场景二。将同一工作簿中的多个 Sheet 合并为一个 Sheet

业务痛点：月度、季度或分区数据分别放在独立 Sheet 中，需要一次性纵向拼接成统一报表，以便进行汇总分析和图表展示。手动复制往往导致行号错位、格式不一致等问题。

1. 加载包含多个 Sheet 的源文件。
2. Select 第一个 Sheet 为“主”Sheet，其余 Sheet 为“待合并”。
3. 获取待合并 Sheet 的已使用范围（.AllocatedRange)。
4. 计算主 Sheet 最终一行的下一行位置。将待合并范围复制过去，实现纵向拼接。
5. #可选# 删除已被合并的 Sheet，只保留单一合并后的 Sheet。不过，

const MergeWorksheetsVertically = async => {
const wasmModule = window.wasmModule.spirexls;怎么说呢，if return;老实说，// 加载中文字体防止乱码
await window.spire.FetchFileToVFS;const inputFileName = '示例.xlsx';await window.spire.FetchFileToVFS;const workbook = new wasmModule.Workbook;workbook.LoadFromFile;话说回来，// 假设第一个是目标 Sheet。第二个是需要拼接的数据来源
const targetSheet = workbook.Worksheets.get;const sourceSheet = workbook.Worksheets.get;// 获取源 Sheet 已使用的数据区域
const sourceRange = sourceSheet.AllocatedRange;不过，// 在目标 Sheet 中定位粘贴起始位置
const destRowStart = targetSheet.LastRow + 1;怎么说呢，const destRange = targetSheet.Range.get;// 执行复制操作
sourceRange.Copy;// 删除已经被合并的源 Sheet
sourceSheet.Remove;const outputFileName = '合并工作表.xlsx';workbook.SaveToFile({
fileName: outputFileName。version: wasmModule.ExcelVersion.Version2010,});const buffer = window.dotnetRuntime.Module.FS.readFile;const blob = new Blob;// 下载结果文件
const url=URL.createObjectURL;const a=document.createElement;a.href=url，a.download=outputFileName;老实说，document.body.appendChild;a.click，document.body.removeChild;URL.revokeObjectURL;不过，workbook.Dispose;不过，// 手动释放 WASM 内存
};

关于虚拟文件程序与资源释放

Pain Point：CORS 限制或网络波动可能导致外部资源无法成功写入 VFS，从而使后续操作报错；对了大批量操作后如果不主动释放对象，会出现浏览器内存使用飙升甚至崩溃。

• FetchFileToVFS: 将本地或 CDN 上的 Excel / 字体文件读入 WASM 虚拟文件程序；此过程完全在浏览器内存中完成，不会产生网络上传风险。
• .SaveToFile / FS.readFile: 将处理后的结果写回 VFS。再读取为二进制数组，用于生成 Blob 下载链接。
• Lifecyle Management： 每次操作结束后务必调用对应对象的 .Dispose 来释放底层 C++/C# 内存；若有临时 Workbook。请在循环内部及时 Dispose，以防止内存泄漏。

& 实践建议

This article demonstrates two typical Excel 合并场景：

• MULTI‑WORKBOOK MERGE: 保留每个源文件独立 Sheet，适用于跨部门报表统一收集；实现方式是创建空 Workbook → 循环 Load → AddCopy → Save → Blob 下载。
• SINGLE‑WORKSHEET MERGE: 把同一本 Workbook 中多张 Sheet 縱向拼接为一张，实现方式是获取已使用范围 → Copy 到目标末尾 → 删除原始 Sheet。

The whole workflow stays inside browser’s memory:

1. Loding → VFS.
2. Merging via Spire.Office WASM API.
3. Savings back to VFS.
4. BLOB export & download.

The key take‑aways for developers facing earlier listed pains are:

• No server upload – all data stays client‑side。complying with privacy & security policies.
• The Spire.Office WASM bundle is lightweight compared with full .NET/.Java server libraries.
• Eagerly call .Dispose,and consider using Web Workers for very large files to keep UI responsive.
• If you encounter “Failed to load….wasm” errors on Chrome/Edge,verify that your server serves .wasm file with MIME type application/wasm.

A well‑structured React component that encapsulates above logic can be reused across projects。turning once‑painful Excel merging task into a simple button click.

If you need furr optimization—such as streaming large files or handling password‑protected workbooks—consider extending WASM module with custom C# plugins or falling back to server‑side processing only for those edge cases.