同一套模板反复用，换个标题就成新版本。季度汇报的框架页、项目复盘的结论页，也常常从旧稿里搬过来。在桌面软件里选中幻灯片复制粘贴不算难，可要放进批量出稿的 Web 流程，就得有人在浏览器和服务端之间来回倒文件。

本文用 Spire.Presentation for JavaScript 在浏览器中复制 PowerPoint 幻灯片，覆盖同一文档内复制与跨文档复制两种情形。整个过程基于 WebAssembly 在浏览器端完成，无需安装 Office，也不依赖任何后端，文件始终留在用户的设备上。

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

• 在同一个演示文稿中复制幻灯片
• 将幻灯片复制到另一个演示文稿

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

在同一个演示文稿中复制幻灯片

Spire.Presentation for JavaScript 提供 Slides.Append() 与 Slides.Insert() 方法，用于把一张已有幻灯片复制一份。传入 { slide } 时复制的就是该页，内容、形状与格式随之带过去，副本与原页相互独立。

index 从 0 开始计数，取 0 表示插到第一张。

具体操作步骤如下：

1. 获取 Spire.Presentation 的 WASM 模块，确认已就绪。
2. 读入源演示文稿与字体，创建 Presentation 对象并加载该文件。
3. 使用 Presentation.Slides.get_Item() 方法取出要复制的幻灯片。
4. 使用 Slides.Append() 复制到末尾，或使用 Slides.Insert() 复制到指定位置。
5. 使用 Presentation.SaveToFile() 方法保存结果文件，再从 VFS 读出并触发浏览器下载。

在同一个演示文稿中复制幻灯片的代码如下：

function App() {
  const copySlide = 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');

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

    // 复制到末尾
    ppt.Slides.Append({ slide: slide });

    // 复制到第 2 个位置，索引从 0 开始
    ppt.Slides.Insert({ index: 1, slide: slide });

    // 保存结果文件
    const outputFileName = '复制幻灯片后.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>复制 PowerPoint 幻灯片</h1>
      <button onClick={copySlide}>
        复制幻灯片
      </button>
    </div>
  );
}

export default App;

把第 1 张幻灯片复制到末尾和第二个位置后的演示文稿：

将幻灯片复制到另一个演示文稿

Slides 的 Append() 与 Insert() 接收的不一定是同一文档里的幻灯片。把源文档取出的 ISlide 交给目标文档，副本就落到目标文档中，并连同源文档的母版与版式一起带入；目标文档原有的页面与母版不受影响。

具体操作步骤如下：

1. 获取 Spire.Presentation 的 WASM 模块，确认已就绪。
2. 读入源文档、目标文档与字体，分别创建 Presentation 对象并加载。
3. 使用源文档的 Slides.get_Item() 方法取出要复制的幻灯片。
4. 使用目标文档的 Slides.Insert() 方法把该页插到指定位置，或用 Slides.Append() 追加到末尾。
5. 使用目标文档的 Presentation.SaveToFile() 方法保存结果文件，再从 VFS 读出并触发浏览器下载。

将幻灯片复制到另一个演示文稿的代码如下：

function App() {
  const copySlideToAnother = 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('目标演示文稿.pptx', "", `${process.env.PUBLIC_URL}/data/`);
    await window.spire.FetchFileToVFS('ARIALUNI.TTF', "/Library/Fonts/", `${process.env.PUBLIC_URL}/font/`);

    // 创建 Presentation 实例并分别加载源文档与目标文档
    const ppt1 = new pptModule.Presentation();
    ppt1.LoadFromFile('源演示文稿.pptx');
    const ppt2 = new pptModule.Presentation();
    ppt2.LoadFromFile('目标演示文稿.pptx');

    // 取出源文档的第 1 张幻灯片
    const slide = ppt1.Slides.get_Item(0);

    // 插到目标文档的第 2 个位置，索引从 0 开始
    ppt2.Slides.Insert({ index: 1, slide: slide });

    // 保存目标文档
    const outputFileName = '跨文档复制幻灯片后.pptx';
    ppt2.SaveToFile({ file: outputFileName, fileFormat: pptModule.FileFormat.Pptx2013 });
    ppt2.Dispose();
    ppt1.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>跨文档复制 PowerPoint 幻灯片</h1>
      <button onClick={copySlideToAnother}>
        复制幻灯片
      </button>
    </div>
  );
}

export default App;

把源文档第 1 张幻灯片插入目标文档后的结果：

一次复制整个演示文稿的幻灯片

要搬的不是一张，而是源文档的全部幻灯片，循环调用 Append() 即可。索引从 0 往后取，副本按原顺序落到目标文档末尾：

// 循环源文档的全部幻灯片，依次追加到目标文档末尾
for (let i = 0; i < ppt1.Slides.Count; i++) {
  ppt2.Slides.Append({ slide: ppt1.Slides.get_Item(i) });
}

常见问题

复制出来的幻灯片和原幻灯片会互相影响吗

不会。Append({ slide }) 与 Insert({ index, slide }) 复制的是副本，副本与原页各自独立，改一页的文字或形状不会带到另一页。

Append 和 Insert 复制幻灯片有什么区别

Append() 只把副本放到末尾，不用关心位置。Insert() 多一个 index，副本落到该索引处，原位置及其后的幻灯片依次后移。index 从 0 开始计数。

跨文档复制后版式和字体变了怎么办

跨文档复制时，副本会连同源文档的母版与版式一起带入目标文档，目标文档因此多出一个来自源文档的母版；原有页面仍使用原来的母版，不受影响，副本的显示效果与在源文档中一致。若希望副本改用目标文档的样式，可在复制后调整该页的版式，或让两份文档使用同一套模板。字体缺字形时，用 FetchFileToVFS 把字体读进 /Library/Fonts/。

一次复制多张幻灯片时页序会乱吗

用 Append() 按源文档索引从 0 到 Slides.Count - 1 依次追加，副本会按原顺序落到目标文档末尾。用 Insert() 批量插入时，每插一张后面的索引都会后移，位置要一并累加。

复制幻灯片需要把文件上传到服务器吗

不需要。Spire.Presentation for JavaScript 基于 WebAssembly 在浏览器端运行，演示文稿通过虚拟文件系统（VFS）在本地读写，复制与保存在本地完成。文件最终是否会离开设备，取决于你在页面上另外接入的代码。

获取免费许可证

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