在许多 Web 应用程序中，集成文档处理能力对于提升用户体验至关重要，它能够实现高效的报告生成和数据处理。React 凭借其基于组件的架构，是前端开发的绝佳选择。通过集成 Spire.Doc for JavaScript，您可以在 React 应用程序中轻松创建和管理 Word 文档。
本指南将逐步介绍如何将 Spire.Doc for JavaScript 集成到您的 React 项目中，涵盖环境搭建和使用示例。
在 React 中使用 Spire.Doc for JavaScript 的优势
React 是一个用于构建用户界面的流行 JavaScript 库，已成为现代 Web 开发的基石。而 Spire.Doc for JavaScript 则是一个功能强大的库，旨在简化 Web 应用程序中的文档处理。
通过将 Spire.Doc for JavaScript 集成到 React 项目中，您可以为应用程序添加高级的 Word 文档处理功能。以下是一些主要优势：
- 无缝文档创建：Spire.Doc for JavaScript 支持直接在 React 中创建和编辑文档，无需外部工具即可简化文档管理。
- 跨平台兼容性：Spire.Doc for JavaScript 允许创建兼容多个平台的文档，使用户能够随时随地访问和编辑文档。
- 功能丰富：Spire.Doc for JavaScript 提供丰富的功能，如文本格式化、表格创建和图片插入，非常适合需要文档操作的应用程序。
- 无缝集成：Spire.Doc for JavaScript 兼容多种 JavaScript 框架（包括 React），可以轻松集成到现有项目中，不会干扰您的工作流程。
设置开发环境
步骤 1. 安装 React 和 npm
从官方网站下载并安装 Node.js。请确保选择与您的操作系统相匹配的版本。
安装完成后，您可以在终端中运行以下命令来验证 Node.js 和 npm 是否正常工作：
步骤 2. 创建一个新的 React 项目
在终端中使用 Create React App 创建一个名为 my-app 的新 React 项目：
npx create-react-app my-app
如果您的 React 项目编译成功，应用程序将在 http://localhost:3000 上运行，您可以在浏览器中查看和测试您的应用程序。
要直观地浏览和管理项目中的文件，您可以使用 VS Code 打开该项目。
在项目中集成 Spire.Doc for JavaScript
从我们的网站下载 Spire.Doc for JavaScript，并将其解压到磁盘上的某个位置。下载的产品包集成了 Spire.Doc for JavaScript、Spire.XLS for JavaScript、Spire.PDF for JavaScript 和 Spire.Presentation for JavaScript。要使用 Spire.Doc for JavaScript 的功能，您需要将相应的文件（spire.doc.js、Spire.Doc.Wasm.zip、spire.common.js、Spire.Common.Wasm.zip 以及 _framework 文件夹）复制到项目的 public 文件夹中。
您也可以使用 npm 进行安装。在 VS Code 的终端中运行以下命令：
npm i spire.office
安装完成后，产品包文件将保存在项目的 node_modules/spire.office 路径中。将上面提到的 5 个文件复制到 React 项目的 "public" 文件夹中。
为了确保文本正确渲染，您可以通过自定义路径添加相关的字体文件。在以下示例中，字体被添加到路径：public\。
使用 JavaScript 创建Word 文件
修改 "App.js" 文件中的代码，使用 WebAssembly（WASM）模块生成 Word 文件。具体来说，利用 Spire.Doc for JavaScript 库进行 Word 文件操作。
以下是完整代码：
import React, { useState, useEffect } from 'react';
function App() {
const [wasmModule, setWasmModule] = useState(null);
// 加载 Spire.Doc
useEffect(() => {
(async () => {
try {
const publicUrl = process.env.PUBLIC_URL || '';
const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.doc.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('加载 spire.doc.js WASM 模块失败:', error);
}
})();
}, []);
// 生成 Word 文件的函数
const createWord = async () => {
const wasmModule = window.wasmModule.spiredoc;
if (wasmModule) {
// 将 arial.ttf 字体文件加载到虚拟文件系统（VFS）中
await window.spire.FetchFileToVFS('arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/`);
// 指定输出文件名
const outputFileName = 'HelloWorld.docx';
// 创建一个新文档
const doc = new wasmModule.Document();
// 添加一个节
let section = doc.AddSection();
// 添加一个段落
let paragraph = section.AddParagraph();
// 向段落中添加文本
paragraph.AppendText('Hello, World!');
// 将文档保存为 Word 文件
doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });
// 读取保存的文件并将其转换为 Blob 对象
const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const modifiedFile = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
// 为 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);
// 清理资源
doc.Dispose();
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>在 React 中使用 JavaScript 创建 Word 文件</h1>
<button onClick={createWord} disabled={!wasmModule}>
生成
</button>
</div>
);
}
export default App;
通过在 VS Code 的终端中输入以下命令来启动开发服务器：
npm start
React 应用程序编译成功后，它将在您的默认浏览器中打开，通常地址为 http://localhost:3000。点击"生成"按钮即可创建 "HelloWorld.docx" 文件。
点击"生成"按钮执行'HelloWorld.docx'文档创建生成。
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
