在如今的数字时代，能够高效地处理 Excel 文件对于 web 应用程序来说至关重要。React，作为一种广泛用于用户界面的 JavaScript 库，通过与 Spire.XLS for JavaScript 集成可以大大增强其功能。这种集成允许开发人员直接在 React 项目中执行复杂的操作，如读取、写入和格式化 Excel 文件。
本文将介绍如何将 Spire.XLS for JavaScript 集成到您的 React 项目中，包括从初始设置到直接使用示例的所有内容。
- 在 React 项目中使用 Spire.XLS for JavaScript 的优势
- 初始环境设置
- 在项目中集成 Spire.XLS for JavaScript
- 使用 JavaScript 创建和保存 Excel 文件
在 React 项目中使用 Spire.XLS for JavaScript 的优势
React 是一种用于构建用户界面的流行 JavaScript 库，它使开发人员能够创建交互式动态用户体验，从而彻底改变了 web 开发。而另一方面，Spire.XLS for JavaScript 是一个功能强大的库，允许开发人员直接在浏览器中操作 Excel 文件。
通过将 Spire.XLS for JavaScript 集成到 React 项目中，您可以 Excel 中的高级功能添加到您的应用程序中。以下是一些主要优势：
- 增强功能：Spire.XLS for JavaScript 可直接在浏览器中创建、修改和格式化 Excel 文件，从而增强 React 应用程序的功能和用户体验。
- 优化数据管理：使用 Spire.XLS 可轻松导入、导出和操作 Excel 文件，从而简化数据管理并减少错误。
- 跨浏览器兼容性：Spire.XLS 专为在主流网络浏览器中无缝运行而设计，可确保在 React 应用程序中对 Excel 文件处理的一致性。
- 无缝集成：Spire.XLS 与包括 React 在内的各种 JavaScript 框架兼容，可轻松集成到现有项目中而不会影响您的工作流程。
初始环境设置
步骤 1、安装 Node.js 和 npm
从官方网站下载并安装 Node.js。请确保选择与您的操作系统相匹配的版本。
安装完成后，您可以在终端运行以下命令来验证 Node.js 和 npm 是否正常工作：
node -v
npm -v
步骤 2、创建新的 React 项目
使用终端中的 Create React App 创建一个名为 my-app 的新 React 项目：
npx create-react-app my-app
创建项目后，可以导航到项目目录，使用以下命令启动开发服务器：
cd my-app
npm start
如果 React 项目编译成功，应用程序将在 http://localhost:3000 上提供服务，让您可以在浏览器中查看和测试应用程序。
要可视化浏览和管理项目中的文件，可以使用 VS Code 打开项目。
在项目中集成 Spire.XLS for JavaScript
从网站下载 Spire.XLS for JavaScript 并解压缩到磁盘上的某个位置。下载的产品包整合了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 文件夹中。
您也可以使用 npm 来安装 Spire.XLS for Java Script。在 VS Code 的终端运行以下命令即可：
npm i spire.office此命令下载后，从项目的 node_modules/spire.office 路径下找到相应文件复制到public下。
同时为了确保文本渲染，相关使用字体文件可自定义路径添加。以下示例中，字体添加路径为：public\font。
使用 JavaScript 创建和保存 Excel 文件
修改 "App.js" 文件中的代码，使用 WebAssembly (WASM) 模块生成 Excel 文件。具体来说，利用 Spire.XLS for JavaScript 库进行 Excel 文件操作。
完整代码如下：
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);
}
})();
}, []);
// 创建HelloWorld.xlsx
const ExcelToPDF = async () => {
const wasmModule = window.wasmModule.spirexls;
if (wasmModule) {
// 将字体加载到虚拟文件系统（VFS）中
await window.spire.FetchFileToVFS('arial.ttf', '/Library/Fonts/',`${process.env.PUBLIC_URL}/font/`);// 创建一个新的工作簿 const workbook = new wasmModule.Workbook();// 清除默认工作表 workbook.Worksheets.Clear();// 添加一个名为“MySheet”的新工作表 const sheet = workbook.Worksheets.Add("MySheet");// 设置“A1”单元格的文本 sheet.Range.get("A1").Text = "Hello World";// 将列宽设置为自动适应 sheet.Range.get("A1").AutoFitColumns();// 定义输出文件名 const outputFileName = 'HelloWorld.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>创建HelloWorld.xlsx</h1><button onClick={ExcelToPDF}disabled={!wasmModule}>生成 </button></div>);}export default App;在 VS Code 的终端使用 npm start 启动开发服务器，单击 “生成” 就能下载生成的 Excel 文件。
