汇报、培训、方案评审这些场景里，演示文稿常常要在网页上就地生成：数据留在后台，用户点一下按钮就拿到一份能带走的 PPT，而不是先导出、再传到 Office 里排版。React 以组件方式组织界面，把这类交互放进页面并不难，缺的是浏览器端的排版能力。
本文将逐步介绍如何将 Spire.Presentation for JavaScript 集成到您的 React 项目中，涵盖详细的环境搭建和运行示例。
在 React 中使用 Spire.Presentation for JavaScript 的优势
React 负责界面，Spire.Presentation for JavaScript 负责演示文稿，两者结合后，浏览器里能走完一整条文档流程：
- 省掉后端：演示文稿的创建、修改与导出都在前端完成，不必为此单独部署一套文档服务。
- 文件不出设备：读写走的都是浏览器里的虚拟文件系统（VFS），文件不会被上传到服务器。
- 覆盖面够用：文本、形状、图片、表格、幻灯片管理等功能齐备，常规的汇报与数据展示场景都能落。
- 接进现有项目不费事：以 WebAssembly 模块的形式加载，React、Vue、Angular 项目都能用，不影响既有的前端架构。
设置开发环境
步骤 1. 安装 React 和 npm
从官方网站下载并安装 Node.js，请选择与操作系统匹配的版本。
安装完成后，在终端中运行以下命令，确认 Node.js 与 npm 都可用：
node -v
npm -v
步骤 2. 创建一个新的 React 项目
在终端中用 Create React App 创建名为 my-app 的项目：
npx create-react-app my-app
项目编译成功后，应用会在浏览器中打开，地址通常是 http://localhost:3000。
后续步骤用 VS Code 打开该项目会更方便，也可以换用你惯用的编辑器。
在项目中集成 Spire.Presentation for JavaScript
从我们的网站下载 Spire.Presentation for JavaScript，解压到磁盘上的某个位置。产品包里同时集成了 Spire.Doc for JavaScript、Spire.XLS for JavaScript、Spire.PDF for JavaScript 与 Spire.Presentation for JavaScript，用到 Presentation 部分时，把下面几个文件复制到项目的 public 文件夹：
spire.presentation.jsSpire.Presentation.Wasm.zipspire.common.jsSpire.Common.Wasm.zip_framework文件夹
也可以用 npm 安装。在 VS Code 的终端中运行：
npm i spire.office
安装完成后文件位于 node_modules/spire.office，把上面这几个同样复制到 public 文件夹。
文本要正确渲染，还需把字体文件放进 public 文件夹。示例代码从 public 读取 ARIAL.TTF，你可以换成其它字体，改一下代码里的路径与文件名即可。
使用 JavaScript 创建 PowerPoint 演示文稿
打开 App.js，替换为下面的代码。它会依次完成以下几步：
- 页面加载时，把 WASM 模块初始化到
window.wasmModule。 - 点击"生成"按钮，创建新的演示文稿。
- 在第一张幻灯片上添加矩形、写入文字，并设置字号与颜色。
- 将演示文稿保存为 PPTX 文件，再读取为 Blob 并触发下载。
排版与导出全过程都由 Spire.Presentation for JavaScript 完成。
import React, { useState, useEffect } from 'react';
function App() {
const [wasmModule, setWasmModule] = useState(null);
// 加载 Spire.Presentation
useEffect(() => {
(async () => {
try {
const publicUrl = process.env.PUBLIC_URL || '';
const spireModule = await import(/* webpackIgnore: true */ `${publicUrl}/spire.presentation.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.presentation.js WASM 模块失败:', error);
}
})();
}, []);
// 生成 PPTX 文件的函数
const createPptx = async () => {
const pptModule = window.wasmModule?.spirepresentation;
if (pptModule) {
// 将 ARIALUNI.TTF 字体文件加载到虚拟文件系统（VFS）中
await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
// 指定输出文件名
const outputFileName = 'HelloWorld.pptx';
// 创建一个新的演示文稿
const ppt = new pptModule.Presentation();
// 在第一张幻灯片上加一个矩形，用来放文字
const rec = pptModule.RectangleF.FromLTRB(ppt.SlideSize.Size.Width / 2 - 250, 80, (500 + ppt.SlideSize.Size.Width / 2 - 250), 230);
const shape = ppt.Slides.get_Item(0).Shapes.AppendShape({ shapeType: pptModule.ShapeType.Rectangle, rectangle: rec });
// 去掉矩形的边框与填充，只留文字
shape.ShapeStyle.LineColor.Color = pptModule.Color.get_White();
shape.Fill.FillType = pptModule.FillFormatType.None;
// 写入文字
shape.AppendTextFrame('Hello World!');
// 设置文字的颜色与字号
const textRange = shape.TextFrame.TextRange;
textRange.Fill.FillType = pptModule.FillFormatType.Solid;
textRange.Fill.SolidColor.Color = pptModule.Color.get_CadetBlue();
textRange.FontHeight = 66;
// 将演示文稿保存为 PPTX 文件
ppt.SaveToFile({ file: outputFileName, fileFormat: pptModule.FileFormat.Pptx2013 });
// 读取保存的文件并转换为 Blob 对象
const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const modifiedFile = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
// 为 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);
// 清理资源
ppt.Dispose();
}
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>在 React 中使用 JavaScript 创建 PowerPoint 演示文稿</h1>
<button onClick={createPptx} disabled={!wasmModule}>
生成
</button>
</div>
);
}
export default App;
在 VS Code 的终端中启动开发服务器：
npm start
应用编译成功后会在默认浏览器中打开，通常地址为 http://localhost:3000。点击"生成"按钮，即可下载生成的 HelloWorld.pptx。
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
