演示文稿中的说明性内容，仅靠文字往往难以在短时间内传达清楚：流程的先后、各部分之间的关系、重点信息的边界，用图形标出来，读者一眼就能抓住。手工在幻灯片上逐个绘制并调整样式，既费时，又难以在批量生成的文档中保持一致。
本文使用 Spire.Presentation for JavaScript 在浏览器中向 PowerPoint 演示文稿添加形状。整个处理过程基于 WebAssembly，在用户设备本地完成，无需安装 Office，也不依赖后端服务，演示文稿不必离开浏览器。
本文介绍两个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.Presentation for JavaScript。以下示例假定 Spire.Presentation 已安装、WebAssembly 模块已初始化。
在 PowerPoint 幻灯片中添加基础形状
幻灯片上的三角形、椭圆、心形、五角星、矩形与上折箭头等基本图形，常用来划分区域、标记要点或配合文字说明。向幻灯片添加形状，需要先确定形状的类型，再按坐标给出位置与大小，图形才能准确落在预期区域。
| 写法 | 得到的结果 |
|---|---|
slide.Shapes.AppendShape({ shapeType, rectangle }) |
在指定矩形区域内添加一个指定类型的形状 |
RectangleF.FromLTRB(left, top, right, bottom) |
用左上角与右下角坐标定义形状的位置和大小 |
ShapeType.Rectangle、ShapeType.Ellipse、ShapeType.Triangle、ShapeType.Heart、ShapeType.FivePointedStar、ShapeType.BentUpArrow |
分别对应矩形、椭圆、三角形、心形、五角星与上折箭头 |
具体操作步骤如下：
- 获取 Spire.Presentation 的 WASM 模块并确认已就绪，将字体文件载入 VFS，再创建
Presentation对象。 - 通过
Presentation.Slides.get_Item(0)取得第一张幻灯片。 - 使用
RectangleF.FromLTRB()按左上角与右下角坐标定义形状区域。 - 用
Shapes.AppendShape()依次添加三角形、椭圆、心形、五角星、矩形与上折箭头，并在shapeType中指定对应的ShapeType成员。 - 调用
Presentation.SaveToFile()保存结果文件，并用Dispose()释放演示文稿。 - 从 VFS 读出结果文件并触发浏览器下载。
在 PowerPoint 幻灯片中添加基础形状的代码如下：
function App() {
const addBasicShapes = async () => {
// 获取 Spire.Presentation WASM 模块
const pptModule = window.wasmModule?.spirepresentation;
// 检查模块是否就绪
if (!pptModule) {
alert('Spire.Presentation is not ready yet');
return;
}
// 将字体载入 VFS
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
// 创建演示文稿，默认带有一张空白幻灯片
const ppt = new pptModule.Presentation();
const slide = ppt.Slides.get_Item(0);
// 添加三角形
slide.Shapes.AppendShape({
shapeType: pptModule.ShapeType.Triangle,
rectangle: pptModule.RectangleF.FromLTRB(50, 90, 200, 230),
});
// 添加椭圆
slide.Shapes.AppendShape({
shapeType: pptModule.ShapeType.Ellipse,
rectangle: pptModule.RectangleF.FromLTRB(285, 90, 435, 230),
});
// 添加心形
slide.Shapes.AppendShape({
shapeType: pptModule.ShapeType.Heart,
rectangle: pptModule.RectangleF.FromLTRB(520, 90, 670, 230),
});
// 添加五角星
slide.Shapes.AppendShape({
shapeType: pptModule.ShapeType.FivePointedStar,
rectangle: pptModule.RectangleF.FromLTRB(50, 290, 200, 430),
});
// 添加矩形
slide.Shapes.AppendShape({
shapeType: pptModule.ShapeType.Rectangle,
rectangle: pptModule.RectangleF.FromLTRB(285, 290, 435, 430),
});
// 添加上折箭头
slide.Shapes.AppendShape({
shapeType: pptModule.ShapeType.BentUpArrow,
rectangle: pptModule.RectangleF.FromLTRB(520, 290, 670, 430),
});
// 保存结果文件
const outputFileName = 'AddBasicShapes.pptx';
ppt.SaveToFile({ file: outputFileName, fileFormat: pptModule.FileFormat.Pptx2013 });
ppt.Dispose();
// 从 VFS 读取生成的文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
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>添加基础形状</h1>
<button onClick={addBasicShapes}>
添加形状
</button>
</div>
);
}
export default App;
在空白幻灯片中添加六种基本形状后的演示文稿：
调整形状的样式
新添加的形状沿用演示文稿的主题配色，放到具体页面中往往需要调整：修改填充与轮廓，让图形与页面色调统一；调整轮廓粗细，突出需要强调的部分；换用渐变填充，让图形更有层次。样式调整在形状对象上完成，一处添加、多处复用，配色也能保持稳定。
| 写法 | 得到的结果 |
|---|---|
shape.Fill.FillType = FillFormatType.Solid |
把形状的填充设为纯色填充 |
shape.Fill.SolidColor.Color = Color.get_xxx() |
指定形状内部的填充颜色 |
shape.Fill.FillType = FillFormatType.Gradient |
把形状的填充设为渐变填充 |
shape.Fill.Gradient.GradientStops.Append({ position, knownColor }) |
为渐变填充添加色标，确定渐变效果 |
shape.Line.FillType = FillFormatType.Solid |
把形状的轮廓线设为实线 |
shape.Line.SolidFillColor.Color = Color.get_xxx() |
指定形状轮廓线的颜色 |
shape.Line.Width = n |
设置形状轮廓线的粗细 |
具体操作步骤如下：
- 获取 Spire.Presentation 的 WASM 模块并确认已就绪，将字体文件载入 VFS，再创建
Presentation对象并取得第一张幻灯片。 - 使用
Shapes.AppendShape()添加需要调整样式的形状。 - 将
Fill.FillType设为FillFormatType.Solid，用Fill.SolidColor.Color指定填充色。 - 把
Line.FillType设为FillFormatType.Solid，用Line.SolidFillColor.Color指定轮廓色，并用Line.Width调整轮廓粗细。 - 需要渐变效果时，把
Fill.FillType改为FillFormatType.Gradient，再通过Fill.Gradient.GradientStops.Append()添加色标。 - 调用
Presentation.SaveToFile()保存结果文件，并用Dispose()释放演示文稿，随后从 VFS 读出文件并触发下载。
调整形状样式的代码如下：
function App() {
const styleShapes = async () => {
// 获取 Spire.Presentation WASM 模块
const pptModule = window.wasmModule?.spirepresentation;
// 检查模块是否就绪
if (!pptModule) {
alert('Spire.Presentation is not ready yet');
return;
}
// 将字体载入 VFS
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
// 创建演示文稿，并取得第一张幻灯片
const ppt = new pptModule.Presentation();
const slide = ppt.Slides.get_Item(0);
// 添加矩形，设置纯色填充、轮廓色与轮廓粗细
let shape = slide.Shapes.AppendShape({
shapeType: pptModule.ShapeType.Rectangle,
rectangle: pptModule.RectangleF.FromLTRB(60, 180, 240, 420),
});
shape.Fill.FillType = pptModule.FillFormatType.Solid;
shape.Fill.SolidColor.Color = pptModule.Color.get_LightSkyBlue();
shape.Line.FillType = pptModule.FillFormatType.Solid;
shape.Line.SolidFillColor.Color = pptModule.Color.get_SteelBlue();
shape.Line.Width = 3;
// 添加椭圆，设置纯色填充与轮廓色
shape = slide.Shapes.AppendShape({
shapeType: pptModule.ShapeType.Ellipse,
rectangle: pptModule.RectangleF.FromLTRB(270, 180, 450, 420),
});
shape.Fill.FillType = pptModule.FillFormatType.Solid;
shape.Fill.SolidColor.Color = pptModule.Color.get_LightGreen();
shape.Line.FillType = pptModule.FillFormatType.Solid;
shape.Line.SolidFillColor.Color = pptModule.Color.get_SeaGreen();
shape.Line.Width = 3;
// 添加三角形，设置渐变填充与轮廓色
shape = slide.Shapes.AppendShape({
shapeType: pptModule.ShapeType.Triangle,
rectangle: pptModule.RectangleF.FromLTRB(480, 180, 660, 420),
});
shape.Fill.FillType = pptModule.FillFormatType.Gradient;
shape.Fill.Gradient.GradientStops.Append({ position: 0, knownColor: pptModule.KnownColors.PowderBlue });
shape.Fill.Gradient.GradientStops.Append({ position: 1, knownColor: pptModule.KnownColors.DarkOrange });
shape.Line.FillType = pptModule.FillFormatType.Solid;
shape.Line.SolidFillColor.Color = pptModule.Color.get_White();
shape.Line.Width = 3;
// 保存结果文件
const outputFileName = 'AddShapeStyles.pptx';
ppt.SaveToFile({ file: outputFileName, fileFormat: pptModule.FileFormat.Pptx2013 });
ppt.Dispose();
// 从 VFS 读取生成的文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
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>调整形状样式</h1>
<button onClick={styleShapes}>
调整样式
</button>
</div>
);
}
export default App;
调整填充、轮廓与渐变样式后的演示文稿：
常见问题
如何把形状设为无填充，只保留轮廓
原因：新添加的形状默认带有填充，若需要轮廓图或让下层内容透出，就要显式改为无填充。
解决：把 Fill.FillType 设为 FillFormatType.None，再用 Line.FillType 与 Line.SolidFillColor.Color 指定轮廓：
shape.Fill.FillType = pptModule.FillFormatType.None;
shape.Line.FillType = pptModule.FillFormatType.Solid;
shape.Line.SolidFillColor.Color = pptModule.Color.get_SlateBlue();
添加形状后如何调整它的位置和大小
原因：形状添加后，位置与尺寸仍然可以修改，不必重新创建。
解决：对取得或保存下来的形状对象设置 Left、Top、Width、Height 属性：
const shape = slide.Shapes.get_Item(0);
shape.Left = 160;
shape.Top = 260;
shape.Width = 300;
shape.Height = 200;
如何给形状添加阴影
原因：阴影可以为形状增加层次，但填充与轮廓只控制形状本身，阴影需要单独通过效果对象设置。
解决：创建 InnerShadowEffect，设置 BlurRadius、Direction、Distance 与 ColorFormat.Color，再赋给 shape.EffectDag.InnerShadowEffect：
const innerShadow = new pptModule.InnerShadowEffect();
innerShadow.BlurRadius = 20;
innerShadow.Direction = 0;
innerShadow.Distance = 0;
innerShadow.ColorFormat.Color = pptModule.Color.get_Black();
shape.EffectDag.InnerShadowEffect = innerShadow;
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
