在日常办公和业务开发中，Excel 文件是最常见的数据交换格式之一。随着 XML 格式的广泛应用，越来越多的系统需要将 Excel 数据导出为 OpenXML（.xml）格式以便在其他平台或系统中读取和解析。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成 Excel 与 OpenXML 之间的双向转换，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。
本文介绍两个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
将 Excel 转换为 OpenXML
将 Excel 文件转换为 OpenXML 格式是一个将 .xlsx 文件保存为 .xml 文件的过程。以下是关键步骤：
- 使用新的
xlsModule.Workbook()方法创建一个工作簿对象。 - 使用
LoadFromFile()方法加载 Excel 文件。 - 使用
SaveAsXml()方法将工作簿保存为 OpenXML 文件。
function App() {
const excelToOpenXML = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.XLS 尚未就绪');
return;
}
// 加载字体
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
// 将 Excel 输入文件载入 VFS
const inputFileName = 'Sample.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 创建工作簿并加载 Excel 文件
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: inputFileName });
// 转换为 OpenXML 格式并保存
const outputFileName = 'ExcelToOpenXML.xml';
workbook.SaveAsXml({ fileName: outputFileName });
// 释放工作簿对象以释放资源
workbook.Dispose();
// 从 VFS 读取转换后的文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'application/xml' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>Excel 转换为 OpenXML</h1>
<button onClick={excelToOpenXML}>
开始转换
</button>
</div>
);
}
export default App;
运行后，excel文件转为 OpenXML文件的效果：
将 OpenXML 转换为 Excel
将 OpenXML 文件转换回 Excel 格式是双向转换的另一方向。以下是关键步骤：
- 使用新的
xlsModule.Workbook()方法创建一个工作簿对象。 - 使用
xlsModule.Stream(inputFileName)方法将 OpenXML 文件读取到流中。 - 使用
Workbook.LoadFromXml()方法从流中加载 OpenXML 文件。 - 使用
Workbook.SaveToFile()方法将 OpenXML 文件保存为 Excel 文件。
function App() {
const openXMLToExcel = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.XLS 尚未就绪');
return;
}
// 加载字体
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
// 将 OpenXML 输入文件载入 VFS
const inputFileName = 'OfficeOpenXMLToExcel.xml';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 创建工作簿
const workbook = new xlsModule.Workbook();
// 使用 Stream 读取 OpenXML 文件并加载到工作簿中
const fileStream = new xlsModule.Stream(inputFileName);
workbook.LoadFromXml({ stream: fileStream });
// 保存为 Excel 格式（Excel 2013 版本）
const outputFileName = 'OpenXMLToExcel.xlsx';
workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2013 });
// 释放工作簿对象以释放资源
workbook.Dispose();
// 从 VFS 读取转换后的文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = outputFileName;
a.click();
URL.revokeObjectURL(url);
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>OpenXML 转换为 Excel</h1>
<button onClick={openXMLToExcel}>
开始转换
</button>
</div>
);
}
export default App;
运行后， OpenXML文件转为Excel文件的效果：
常见问题
中文字符在 OpenXML 里变成问号或方框
原因：字体没有正确加载到 VFS。教程里加载了 simsun.ttc，但如果你的文档用了其他中文字体（比如微软雅黑、宋体之外的字体），或者字体文件路径不对，渲染和导出时就会缺字形。
解决：确认 FetchFileToVFS 的字体路径和 PUBLIC_URL 拼接正确，并且字体文件确实在 public/font/ 下。如果文档用了多种字体，需要把对应字体文件都加载进去，不能只加载一个 simsun.ttc。
SaveAsXml 和 SaveToFile 保存出来的文件，下载后打不开或提示损坏
原因：从 VFS 读取文件时用了错误的读取方式，或者 Blob 的 MIME 类型设置不对。比如 OpenXML 应该用 application/xml，Excel 应该用 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet，写错了浏览器可能按文本处理，导致二进制内容被破坏。
解决：检查确认 a.download 的文件名扩展名和实际内容格式一致，不要出现 .xml 里装的是 xlsx 二进制的情况。
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
