幻灯片上的图形一多，逐个移动、对齐就变得费时，稍有不慎还会打乱原有的间距。把关系紧密的图形组合成一个整体后，拖动时整组一起移动，缩放与对齐也以组为单位进行；需要单独调整其中某个图形时，再取消组合即可。

本文使用 Spire.Presentation for JavaScript 在浏览器中组合与取消组合 PowerPoint 形状。整个处理过程基于 WebAssembly，在用户设备本地完成，无需安装 Office，也不依赖后端服务，演示文稿不必离开浏览器。

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

• 组合 PowerPoint 形状
• 取消组合 PowerPoint 形状

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

组合 PowerPoint 形状

一组标注、一簇箭头、一块示意图，往往需要作为一个单元来摆放。逐个选中再同时操作并不方便，稍有不慎就会移动其中某一个。组合把这些形状收拢为一个整体，之后移动、缩放都作用于整组，组内形状的相对位置保持不变。

具体操作步骤如下：

1. 获取 Spire.Presentation 的 WASM 模块并确认已就绪，将字体文件与演示文稿载入 VFS。
2. 创建 Presentation 对象并调用 LoadFromFile() 加载演示文稿，再用 Slides.get_Item(0) 取得第一张幻灯片。
3. 借助 Shapes.Count 与 Shapes.get_Item() 遍历幻灯片，把需要组合的形状依次放进数组。
4. 调用 slide.GroupShapes() 传入该数组，返回组合后的 GroupShape 对象。
5. 调用 Presentation.SaveToFile() 保存结果文件，并用 Dispose() 释放演示文稿。
6. 从 VFS 读出结果文件并触发浏览器下载。

组合 PowerPoint 形状的代码如下：

function App() {
  const groupShapes = 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 inputFileName = 'Shapes.pptx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 加载演示文稿并取得第一张幻灯片
    const ppt = new pptModule.Presentation();
    ppt.LoadFromFile(inputFileName);
    const slide = ppt.Slides.get_Item(0);

    // 收集幻灯片上的全部形状
    const shapes = [];
    for (let i = 0; i < slide.Shapes.Count; i++) {
      shapes.push(slide.Shapes.get_Item(i));
    }

    // 把这些形状组合成一个整体
    slide.GroupShapes(shapes);

    // 保存结果文件
    const outputFileName = 'GroupShapes.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={groupShapes}>
        组合形状
      </button>
    </div>
  );
}

export default App;

组合幻灯片上的全部形状后的演示文稿：

取消组合 PowerPoint 形状

组合之后，如果需要单独调整组内的某一个形状——更换颜色、修改文字、调整位置——就要先取消组合。取消组合把组内形状放回幻灯片的形状集合，组合本身不再保留，各形状在原来的位置和大小上恢复独立。

具体操作步骤如下：

1. 获取 Spire.Presentation 的 WASM 模块并确认已就绪，将字体文件与演示文稿载入 VFS。
2. 创建 Presentation 对象并调用 LoadFromFile() 加载演示文稿，再用 Slides.get_Item() 取得存放组合形状的幻灯片。
3. 从 0 开始遍历 Shapes.Count，用 Shapes.get_Item(i) 逐个取得幻灯片上的形状。
4. 用 shape instanceof pptModule.GroupShape 判断形状是否为组合，命中时调用 slide.Ungroup() 取消组合。
5. 调用 Presentation.SaveToFile() 保存结果文件，并用 Dispose() 释放演示文稿，随后从 VFS 读出文件并触发下载。

取消组合 PowerPoint 形状的代码如下：

function App() {
  const ungroupShapes = 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 inputFileName = 'Shapes.pptx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 加载演示文稿并取得第二张幻灯片
    const ppt = new pptModule.Presentation();
    ppt.LoadFromFile(inputFileName);
    const slide = ppt.Slides.get_Item(1);

    // 遍历幻灯片中的形状，取消其中的组合
    for (let i = 0; i < slide.Shapes.Count; i++) {
      const shape = slide.Shapes.get_Item(i);
      if (shape instanceof pptModule.GroupShape) {
        slide.Ungroup(shape);
      }
    }

    // 保存结果文件
    const outputFileName = 'UngroupShapes.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={ungroupShapes}>
        取消组合形状
      </button>
    </div>
  );
}

export default App;

取消组合后的演示文稿：

常见问题

组合后形状集合中的数量为什么会减少

原因：GroupShapes() 把传入的形状收拢成一个组合形状，组合在幻灯片的形状集合中只占一个位置，因此集合中的形状数量会减少。

解决：组合内部的形状仍然保留，通过 GroupShape.Shapes 集合即可逐个取得：

const group = slide.Shapes.get_Item(0);
const innerCount = group.Shapes.Count;

只选取一个形状可以组合吗

原因：组合是把多个形状并为一个整体，只有一个形状时没有可合并的对象。

解决：至少选中两个形状再调用 GroupShapes()。传入单个形状时不会形成组合，幻灯片上的形状数量保持不变。

如何只组合幻灯片上的部分形状

原因：GroupShapes() 只处理传入数组中的形状，其余形状不受影响。

解决：按索引挑出需要的形状放进数组，再交给 GroupShapes()：

slide.GroupShapes([slide.Shapes.get_Item(0), slide.Shapes.get_Item(2)]);

获取免费许可证

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