演示文稿要在网页上预览、做缩略图或放进图库时，图片比 PPT 文件好用：不受对方机器上的 Office 版本和字体影响，也不用装插件。靠截图只能一张张手工来，接不进批量流程；放到服务端渲染，文件又得先传出去。
本文用 Spire.Presentation for JavaScript 在浏览器端把 PowerPoint 转换为图片，覆盖位图（PNG / JPG）、矢量图（SVG）与指定尺寸的缩略图三种输出。转换基于 WebAssembly 在浏览器本地完成，幻灯片通过虚拟文件系统（VFS）读取，图片写回 VFS 后再触发下载，不需要后端配合。
本文介绍三个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.Presentation for JavaScript。下面的示例假定 Spire.Presentation 已安装、WebAssembly 模块已初始化。
将 PowerPoint 转换为 PNG 或 JPG 图片
Spire.Presentation for JavaScript 提供 Slide.SaveAsImage() 方法，用于把一张幻灯片渲染成位图。不带参数时，输出尺寸与幻灯片本身一致。
具体操作步骤如下：
- 获取 Spire.Presentation 的 WASM 模块，确认已就绪。
- 读入示例演示文稿与字体，创建
Presentation对象并加载该文件。 - 遍历
Presentation.Slides，用Slide.SaveAsImage()方法将每页渲染为图片流。 - 用图片流的
Save()方法将图片以 PNG 格式写入 VFS。 - 从 VFS 读出图片并触发浏览器下载，最后释放资源。
将 PowerPoint 转换为 PNG 图片的代码如下：
function App() {
const convertToPng = async () => {
// 获取 Spire.Presentation WASM 模块
const pptModule = window.wasmModule?.spirepresentation;
// 检查模块是否就绪
if (!pptModule) {
alert('Spire.Presentation is not ready yet');
return;
}
// 载入示例演示文稿与字体
await window.spire.FetchFileToVFS('数据简报.pptx', "", `${process.env.PUBLIC_URL}/data/`);
await window.spire.FetchFileToVFS('ARIALUNI.TTF', "/Library/Fonts/", `${process.env.PUBLIC_URL}/font/`);
// 创建 Presentation 实例并加载演示文稿
const ppt = new pptModule.Presentation();
ppt.LoadFromFile('数据简报.pptx');
// 逐页渲染为 PNG 图片
for (let i = 0; i < ppt.Slides.Count; i++) {
const slide = ppt.Slides.get_Item(i);
const image = slide.SaveAsImage();
// 将图片写入 VFS
const imageFileName = `第${i + 1}张幻灯片.png`;
image.Save(imageFileName);
// 从 VFS 读出图片，触发下载
const imageArray = window.dotnetRuntime.Module.FS.readFile(imageFileName);
const blob = new Blob([imageArray], { type: 'image/png' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = imageFileName;
a.click();
URL.revokeObjectURL(url);
image.Dispose();
}
ppt.Dispose();
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>将 PowerPoint 转换为 PNG 或 JPG 图片</h1>
<button onClick={convertToPng}>
转换为 PNG
</button>
</div>
);
}
export default App;
逐页导出的三张 PNG 图片：
将 PowerPoint 转换为 SVG 图片
Spire.Presentation for JavaScript 还提供 Slide.SaveToSVG() 方法，用于把一张幻灯片导出为 SVG 矢量图。输出的是 SVG 字节数组，文字和图形以矢量路径保存，放大后边缘依然清晰。
具体操作步骤如下：
- 获取 Spire.Presentation 的 WASM 模块，确认已就绪。
- 读入示例演示文稿与字体，创建
Presentation对象并加载该文件。 - 遍历
Presentation.Slides，用Slide.SaveToSVG()方法将每页转换为 SVG 字节数组。 - 用
Stream对象的Save()方法将字节写入 VFS 中的.svg文件。 - 从 VFS 读出 SVG 文件并触发浏览器下载，最后释放资源。
将 PowerPoint 转换为 SVG 图片的代码如下：
function App() {
const convertToSvg = async () => {
// 获取 Spire.Presentation WASM 模块
const pptModule = window.wasmModule?.spirepresentation;
// 检查模块是否就绪
if (!pptModule) {
alert('Spire.Presentation is not ready yet');
return;
}
// 载入示例演示文稿与字体
await window.spire.FetchFileToVFS('数据简报.pptx', "", `${process.env.PUBLIC_URL}/data/`);
await window.spire.FetchFileToVFS('ARIALUNI.TTF', "/Library/Fonts/", `${process.env.PUBLIC_URL}/font/`);
// 创建 Presentation 实例并加载演示文稿
const ppt = new pptModule.Presentation();
ppt.LoadFromFile('数据简报.pptx');
// 逐页转换为 SVG
for (let i = 0; i < ppt.Slides.Count; i++) {
const svgBytes = ppt.Slides.get_Item(i).SaveToSVG();
// 将 SVG 字节写入 VFS
const svgFileName = `第${i + 1}张幻灯片.svg`;
const stream = new pptModule.Stream(svgBytes);
stream.Save(svgFileName);
// 从 VFS 读出 SVG，触发下载
const svgArray = window.dotnetRuntime.Module.FS.readFile(svgFileName);
const blob = new Blob([svgArray], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = svgFileName;
a.click();
URL.revokeObjectURL(url);
stream.Dispose();
}
ppt.Dispose();
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>将 PowerPoint 转换为 SVG 图片</h1>
<button onClick={convertToSvg}>
转换为 SVG
</button>
</div>
);
}
export default App;
逐页导出的 SVG 文件：
将指定幻灯片转换为指定尺寸的图片
Slide.SaveAsImage() 还可以接收宽高两个参数，把某一页按指定像素尺寸渲染。生成缩略图、封面图或固定版位的预览图时，这种方式比整份逐页导出更直接：先用索引取出目标页，再按目标尺寸渲染。
具体操作步骤如下：
- 获取 Spire.Presentation 的 WASM 模块，确认已就绪。
- 读入示例演示文稿与字体，创建
Presentation对象并加载该文件。 - 用
Presentation.Slides.get_Item(index)取出目标幻灯片，索引从 0 开始。 - 调用
Slide.SaveAsImage(width, height)按指定像素尺寸渲染图片，并用Save()方法写入 VFS。 - 从 VFS 读出图片并触发浏览器下载，最后释放资源。
将指定幻灯片转换为指定尺寸图片的代码如下：
function App() {
const convertToCustomSize = async () => {
// 获取 Spire.Presentation WASM 模块
const pptModule = window.wasmModule?.spirepresentation;
// 检查模块是否就绪
if (!pptModule) {
alert('Spire.Presentation is not ready yet');
return;
}
// 载入示例演示文稿与字体
await window.spire.FetchFileToVFS('数据简报.pptx', "", `${process.env.PUBLIC_URL}/data/`);
await window.spire.FetchFileToVFS('ARIALUNI.TTF', "/Library/Fonts/", `${process.env.PUBLIC_URL}/font/`);
// 创建 Presentation 实例并加载演示文稿
const ppt = new pptModule.Presentation();
ppt.LoadFromFile('数据简报.pptx');
// 取出第二张幻灯片（索引从 0 开始）
const slide = ppt.Slides.get_Item(1);
// 按 1920×1080 像素渲染图片
const image = slide.SaveAsImage(1920, 1080);
// 将图片写入 VFS
const imageFileName = '第二张幻灯片-1920x1080.png';
image.Save(imageFileName);
// 从 VFS 读出图片，触发下载
const imageArray = window.dotnetRuntime.Module.FS.readFile(imageFileName);
const blob = new Blob([imageArray], { type: 'image/png' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = imageFileName;
a.click();
URL.revokeObjectURL(url);
image.Dispose();
ppt.Dispose();
};
return (
<div style={{ textAlign: 'center', height: '300px' }}>
<h1>将指定幻灯片转换为指定尺寸的图片</h1>
<button onClick={convertToCustomSize}>
转换为指定尺寸
</button>
</div>
);
}
export default App;
按 1920×1080 导出的第二张幻灯片：
常见问题
转换出来的图片里中文或日文显示成方框怎么办
原因：浏览器端的 WASM 环境找不到演示文稿用到的字体，缺字只能渲染成方框。
解决：把字体文件读进 VFS 的 /Library/Fonts/ 目录再转换。示例用 ARIALUNI.TTF 覆盖中日文，其他字体按同样方式补：
// 将字体载入 VFS 的字体目录
await window.spire.FetchFileToVFS('ARIALUNI.TTF', "/Library/Fonts/", `${process.env.PUBLIC_URL}/font/`);
导出的图片分辨率或比例不合适怎么办
Slide.SaveAsImage() 不带参数时按幻灯片原始尺寸输出。需要更高像素时，给它传入宽高两个参数，单位是像素：
// 把第一张幻灯片渲染成 1920×1080 的图片
const image = ppt.Slides.get_Item(0).SaveAsImage(1920, 1080);
image.Save('高清幻灯片.png');
宽高比与幻灯片不一致时，图片会按传入的尺寸拉伸。示例演示文稿是 16:9，用 1920×1080 正好匹配；其他比例按原始宽高比换算高度再传入，例如 4:3 的幻灯片可以传 1920×1440。
只导出了 PNG，怎么得到 JPG
Slide.SaveAsImage() 在 JavaScript 版中输出 PNG 位图，没有直接指定 JPG 的参数。需要 JPG 时，把 PNG 读到浏览器里，用 canvas 重新编码：
// 把第一张幻灯片的 PNG 重新编码为 JPG
const pngBytes = window.dotnetRuntime.Module.FS.readFile('第1张幻灯片.png');
const bitmap = await createImageBitmap(new Blob([pngBytes], { type: 'image/png' }));
const canvas = document.createElement('canvas');
canvas.width = bitmap.width;
canvas.height = bitmap.height;
canvas.getContext('2d').drawImage(bitmap, 0, 0);
canvas.toBlob((jpg) => {
const url = URL.createObjectURL(jpg);
const a = document.createElement('a');
a.href = url;
a.download = '第1张幻灯片.jpg';
a.click();
URL.revokeObjectURL(url);
}, 'image/jpeg', 0.92);
隐藏的幻灯片也会导出吗
逐页遍历 Slides 时取到的是全部幻灯片，隐藏页同样会被渲染成图片或 SVG。只想导出可见页，在循环里判断 Slide.Hidden 跳过：
// 跳过隐藏的幻灯片
for (let i = 0; i < ppt.Slides.Count; i++) {
const slide = ppt.Slides.get_Item(i);
if (slide.Hidden) {
continue;
}
const image = slide.SaveAsImage();
image.Save(`第${i + 1}张幻灯片.png`);
image.Dispose();
}
只想要其中一张幻灯片的图片，也要整份循环吗
不用。用 Slides.get_Item(index) 取出那一页，直接调用 SaveAsImage() 或 SaveToSVG() 即可。索引从 0 开始，取第 2 张就是 get_Item(1)：
// 只导出第二张幻灯片
const image = ppt.Slides.get_Item(1).SaveAsImage();
image.Save('第二张幻灯片.png');
image.Dispose();
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
