演示文稿里的产品图、图标和截图，经常还要单独拿出来用：做网页素材、归档旧项目，或者把几十份 PPT 迁移到新模板时批量导出图片。手工一张张右键另存，费时又容易漏。放到服务端跑脚本，文件就得先上传出去。

本文用 Spire.Presentation for JavaScript 在浏览器里直接提取 PowerPoint 中的图片。整份演示文稿的图片可以一次全部导出，也可以只取指定幻灯片上的图片。整个过程基于 WebAssembly 在浏览器端完成，无需安装 Office，也不依赖后端，文件始终留在用户的设备上。

本文介绍两个核心功能点：

• 提取 PowerPoint 中的全部图片
• 提取指定幻灯片中的图片

有关安装和项目配置，请参考 React 项目中集成 Spire.Presentation for JavaScript。下面的示例假定 Spire.Presentation 已安装、WebAssembly 模块已初始化。

提取 PowerPoint 中的全部图片

Spire.Presentation for JavaScript 提供 Presentation.Images 属性，用于访问演示文稿集中的图片资源。

具体操作步骤如下：

1. 获取 Spire.Presentation 的 WASM 模块，确认已就绪。
2. 读入示例演示文稿与字体，创建 Presentation 对象并加载该文件。
3. 用 Presentation.Images 取图片集合，按 Count 逐项访问 get_Item(i)。
4. 用 IImageData.Image 取出图片流，调用 Save() 保存为 PNG。
5. 从 VFS 读取每张图片，转成 Blob 后触发浏览器下载。

提取全部图片的代码如下：

function App() {
  const downloadFile = (blob, fileName) => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  const extractAllImages = 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');

    // 遍历文档中的图片集合，逐张保存并下载
    for (let i = 0; i < ppt.Images.Count; i++) {
      const image = ppt.Images.get_Item(i).Image;
      const imageName = `图片_${i}.png`;

      // 将图片写入虚拟文件系统
      image.Save(imageName);
      const fileArray = window.dotnetRuntime.Module.FS.readFile(imageName);
      const blob = new Blob([fileArray], { type: 'image/png' });

      // 连续下载多张时留出间隔，避免被浏览器拦截
      await new Promise((resolve) => setTimeout(resolve, 300));
      downloadFile(blob, imageName);

      image.Dispose();
    }

    ppt.Dispose();
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>提取 PowerPoint 中的全部图片</h1>
      <button id="btn-1" onClick={extractAllImages}>
        提取全部图片
      </button>
    </div>
  );
}

export default App;

下载得到的全部图片：

提取指定幻灯片中的图片

只想提取某一页的图片时，先用 Slides.get_Item(index) 取到该页，再遍历其形状取出图片即可。

具体操作步骤如下：

1. 获取 Spire.Presentation 的 WASM 模块，确认已就绪。
2. 读入示例演示文稿与字体，创建 Presentation 对象并加载该文件。
3. 用 Slides.get_Item(1) 取第二张幻灯片，遍历其 Shapes 集合。
4. 用 instanceof SlidePicture 筛出图片形状，经 PictureFill.Picture.EmbedImage.Image 取出图片流并调用 Save()。
5. 从 VFS 读取每张图片，转成 Blob 后触发浏览器下载。

提取指定幻灯片图片的代码如下：

function App() {
  const downloadFile = (blob, fileName) => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  const extractSlideImages = 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');

    // 取第二张幻灯片
    const slide = ppt.Slides.get_Item(1);
    let count = 0;

    // 遍历该页上的所有形状
    for (let j = 0; j < slide.Shapes.Count; j++) {
      const shape = slide.Shapes.get_Item(j);

      // 只处理图片形状
      if (shape instanceof pptModule.SlidePicture) {
        const image = shape.PictureFill.Picture.EmbedImage.Image;
        const imageName = `幻灯片图片_${count}.png`;

        // 将图片写入虚拟文件系统
        image.Save(imageName);
        const fileArray = window.dotnetRuntime.Module.FS.readFile(imageName);
        const blob = new Blob([fileArray], { type: 'image/png' });

        // 连续下载多张时留出间隔，避免被浏览器拦截
        await new Promise((resolve) => setTimeout(resolve, 300));
        downloadFile(blob, imageName);

        image.Dispose();
        count++;
      }
    }

    ppt.Dispose();
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>提取指定幻灯片中的图片</h1>
      <button id="btn-2" onClick={extractSlideImages}>
        提取第二张幻灯片的图片
      </button>
    </div>
  );
}

export default App;

只下载了第二张幻灯片上的图片：

常见问题

Presentation.Images 和遍历幻灯片形状取图有什么区别

Presentation.Images 是整份文档的图片资源，适合一次性全部导出；遍历 Shapes 则按页筛选，只处理图片形状，范围更窄，但两者取出的都是嵌入原图，而非渲染后的画面。

为什么有的页面图片没有提取到

第二个示例只认 SlidePicture 形状，图片若在背景、表格或图表内部，或通过链接引用外部图片，就不在提取范围内。

一次触发多张下载没有反应怎么办

浏览器会拦截同一页面的连续下载，代码已在每次下载间留出 300 毫秒间隔；仍被拦截时，在地址栏放行本站点的多次下载即可。

提取的图片为什么和页面上显示的大小不一样

提取出来的是嵌在文档里的原始图片，幻灯片上的显示尺寸、裁剪和缩放都不影响它，需要与页面显示一致时应先按形状裁剪或改用渲染幻灯片的方式导出。

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。