在日常的公司级后台开发中，Excel 文件的在线处理是个绕不开的需求。除了常见的读取和报表导出，有时我们还需要在纯前端对已有 Excel 文件做结构调整。比如在同一工作簿内复制工作表、跨工作簿复制，或者只复制选定的单元格区域。

最近在项目中正好遇到了这个场景，我把实现过程整理了下来。这篇文章会从环境准备、主要原因、几种复制场景的实现还有实际遇到的问题这几个方面展开。

为什么选择在前端处理

把文件传到后端让 Java 或 Python 处理是常规做法，但有些情况下前端直接处理也有它的好处：

• 文件不用离开浏览器。对数据隐私更友好
• 省去上传下载的时间，操作完直接拿到结果
• 简单的结构调整，没必要再绕一圈服务端

因为 WebAssembly 的普及，一些原本只能在服务端跑的类库也能在浏览器里用了这让前端处理 Excel 内部结构变成了可能。

环境准备与初始化

创建一个 React 项目，接下来将运行所需的 Wasm 文件、JS 资源还有字体文件放到 public 目录下。这类文件体积通常不小，不适合直接打进 bundle。放在静态资源目录或走 CDN 是更合理的做法。

Spire.XLS for JavaScript 的初始化需要先加载 WASM 模块，并将文件载入虚拟文件程序。下面是一个基础的初始化 Hook：

import { useEffect,useState } from "react";export function useXlsInit {
const = useState;不过，const = useState;const = useState;useEffect => {
const init = async => {
try {
// 等待 WASM 模块就绪
const module = window.wasmModule?.spirexls，if {
setError;return，}
setXlsModule;// 将字体文件载入 VFS
await window.spire.FetchFileToVFS(
'simsun.ttc'。'/Library/Fonts/',`${process.env.PUBLIC_URL}/font/`
);setIsReady，} catch {
setError;}
}，init;},)，return { xlsModule,isReady,error };按理说，}

使用者痛点：如果忘记加载中文字体。导出的 Excel 会出现乱码或排版错位；务必在初始化阶段确认字体已成功写入 VFS。

从场景一来看，同一工作簿内复制工作表

这是最常见的需求。其实，官方 API 提供了两种思路：一是通过 Add 新建空工作表再用 CopyFrom 复制内容。二是直接用 AddCopy 在复制的同时创建工作表。

以下示例采用 CopyFrom 的方式，将第一个工作表的内容复制到新工作表中：

const copySheetWithinWorkbook = async => {
if return;// 将 Excel 文件载入 VFS
await window.spire.FetchFileToVFS;// 加载工作簿
const workbook = new xlsModule.Workbook;workbook.LoadFromFile;// 获取第一个工作表
let sheet = workbook.Worksheets.get;// 添加新工作表，并将源表内容复制过来
let sheet1 = workbook.Worksheets.Add;sheet1.CopyFrom;不过，// 保存文件
const outputFileName = "CopySheetWithinWorkbook_output.xlsx";workbook.SaveToFile;// 释放资源
workbook.Dispose;话说回来，//触发下载
downloadFromVFS;}，老实说，

使用者痛点：复制后发现样式不完整或公式失效？怎么说呢，请检查源工作表是否包含图表或宏。这类对象目前不被 CopyFrom 完全支持。

说到场景二，跨工作簿复制工作表

有时候源表在一个文件里目标表在另一个文件里需要把整个工作表从一个工作簿搬到另一个工作簿。这时可以用 AddCopy 方法，直接传入源工作表对象：

const copySheetAcrossWorkbooks = async => {
if return;const sourceFileName = "ReadImages.xlsx";const targetFileName = "Sample.xlsx";// 将两个文件都载入 VFS
await window.spire.FetchFileToVFS;await window.spire.FetchFileToVFS;// 加载源工作簿
const sourceWorkbook = new xlsModule.Workbook;sourceWorkbook.LoadFromFile;
const srcWorksheet = sourceWorkbook.Worksheets.get;// 加载目标工作簿
const targetWorkbook = new xlsModule.Workbook;targetWorkbook.LoadFromFile;// 在目标工作簿中添加新工作表，并从源工作表复制
targetWorkbook.Worksheets.AddCopy;// 保存目标工作簿
const outputFileName = "CopyAcrossWorkbooks_output.xlsx";targetWorkbook.SaveToFile;//释放资源
sourceWorkbook.Dispose;targetWorkbook.Dispose;//触发下载
downloadFromVFS;}，

Pain Point：跨文件复制时经常会碰到“找不到源 Sheet”错误，这往往是因为源码文件未正确写入 VFS 或者加载顺序错误导致。

场景三这方面，复制选定的单元格区域

If you only need part of data rar than whole sheet。you can precisely control copy operation using Range toger with Copy method.

const copyRange = async => {
if return;const inputFileName = "Sample.xlsx";await window.spire.FetchFileToVFS;老实说，const workbook = new xlsModule.Workbook;workbook.LoadFromFile;const sheet = workbook.Worksheets.get;// 指定源区域，例如 A1:E1
const sourceRange = sheet.Range.get;// 新增目标工作表
let sheet1 = workbook.Worksheets.Add;// 将源区域复制到目标工作表的指定起始位置
sheet.Copy;其实，sheet1.AllocatedRange.AutoFitColumns;按理说，const outputFileName = "CopyRange_output.xlsx";workbook.SaveToFile;workbook.Dispose;downloadFromVFS;}，

User Pain Point：The copied range may lose merged cells or conditional formatting;after copying you may need to manually re‑apply those rules.

Pain Points 汇总与方法建议

• SaaS 环境下 Wasm 加载慢：
  • Solution: 使用 CDN 并开启 HTTP Cache，在页面入口预加载 Wasm；给使用者展示 loading 动画避免误操作。
• 大体积 Excel 导致浏览器卡顿：
  • Solution: 对上传文件大小进行限制，超出阈值提示走后端服务；或者分块读取并使用 Web Worker 做离线计算。
• Certain advanced features 丢失：
  • Solution: 仅用于 “结构调节 + 数据迁移” 场景；若业务必须保留这些高级对象，请保留后端方案。
• CORS 与本地 VFS 方法冲突：
  • Solution: 统一使用相对方法或通过 .env` 配置公共 URL；确保服务器返回正确 `Access‑Control‑Allow‑Origin` 头部。
• CJK 字体缺失导致乱码：
  • Solution: 务必在初始化阶段加载对应字体，并验证 `FetchFileToVFS` 是否成功返回。按理说，

Pain Point 示例代码

try {
await window.spire.FetchFileToVFS(
'simsun.ttc'。'/Library/Fonts/',`${process.env.PUBLIC_URL}/font/`
);其实，} catch {
console.error;}

文件下载的通用处理

const downloadFromVFS = => {
const fileArray = 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 = fileName;a.click，URL.revokeObjectURL;}，怎么说呢，

React组件整合示例

const App: React.FC = => {
const { xlsModule。isReady,error } = useXlsInit;if
return 

正在加载组件资源，请稍候...
if
return 

加载失败的观点是。{error}
return (


Excel 工作表复制

请选择复制模式：
 copySheetWithinWorkbook}>
同一工作簿内复制

 copySheetAcrossWorkbooks} style={{ marginLeft: '10px' }}>
跨工作簿复制

 copyRange} style={{ marginLeft: '10px' }}>
コピー单元格区域


);}，

`