同一份汇报稿，换一批听众就要换讲述顺序：给管理层先摆结论，给客户先看案例，培训时又把操作步骤提到前面。页数一多，在桌面软件里拖缩略图就成了体力活，也接不进批量出稿的 Web 流程。放到服务端处理，文件一旦上传，就离开了用户的设备。

本文介绍用 Spire.Presentation for JavaScript 调整 PowerPoint 幻灯片顺序。它基于 WebAssembly 在浏览器端运行，通过虚拟文件系统（VFS）在本地读写文件，无需安装 Office，也不依赖后端。

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

调整 PowerPoint 幻灯片的排列位置

ISlide.SlideNumber 属性表示幻灯片在演示文稿中的位置，从 1 开始计数。给它赋一个目标页码，这张幻灯片就移到对应位置，原来占据该位置的页及其后的页依次顺延；读取该属性则返回当前页码。

步骤 1：载入待处理的 PowerPoint

先取到 Spire.Presentation 的 WASM 模块并确认就绪，再把示例演示文稿与字体读进虚拟文件系统（VFS），交给 Presentation 加载。字体用于渲染页面上的占位符文字，文件与字体都在本地读取，不会发往服务器。

// 获取 Spire.Presentation WASM 模块
const pptModule = window.wasmModule?.spirepresentation;

// 检查模块是否就绪
if (!pptModule) {
  alert('Spire.Presentation is not ready yet');
  return;
}

// 载入示例演示文稿与字体
await window.spire.FetchFileToVFS('test.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('test.pptx');

步骤 2：把幻灯片移到目标位置

页码从 1 开始，Slides.get_Item() 的索引从 0 开始。取第 1 张就传 0，把它的 SlideNumber 设为 3，这张页移到第 3 位，原来的第 2、3 张各前移一位。

// 取出第 1 张幻灯片，把它的页码设为 3
const slide = ppt.Slides.get_Item(0);
slide.SlideNumber = 3;

步骤 3：保存结果并下载

保存后文件留在 VFS 里，从里面读出字节、包成 Blob，再交给浏览器下载。保存前调用 Dispose() 释放演示文稿占用的资源。

// 保存结果文件
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);

完整代码

把上面三步放回一个 App 组件，就是可直接运行的完整示例。

function App() {
  const moveSlideToPosition = async () => {
    // 获取 Spire.Presentation WASM 模块
    const pptModule = window.wasmModule?.spirepresentation;

    // 检查模块是否就绪
    if (!pptModule) {
      alert('Spire.Presentation is not ready yet');
      return;
    }

    // 载入示例演示文稿与字体
    await window.spire.FetchFileToVFS('test.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('test.pptx');

    // 取出第 1 张幻灯片，把它的页码设为 3
    const slide = ppt.Slides.get_Item(0);
    slide.SlideNumber = 3;

    // 保存结果文件
    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>调整幻灯片位置</h1>
      <button onClick={moveSlideToPosition}>
        调整顺序
      </button>
    </div>
  );
}

export default App;

把第 1 张幻灯片移到第 3 位后的演示文稿：

常见问题

幻灯片页码从 0 开始还是从 1 开始

原因：同一段代码里两套计数并存。SlideNumber 表示给人看的页码，从 1 开始；Slides.get_Item() 的索引从 0 开始。

解决：定位幻灯片对象用 Slides.get_Item(index)，传 0 基索引；设置最终页码用 slide.SlideNumber = position，传 1 基位置。把第 1 张移到第 3 位，代码是 ppt.Slides.get_Item(0).SlideNumber = 3。

目标页码写成 0 或超过总页数会怎样

原因：SlideNumber 的合法范围是 1 到 Slides.Count。写成 0 或大于总页数都会落到范围之外，Spire.Presentation 抛出 Index range. 错误，保存与下载随之中断。

解决：赋值前先按 ppt.Slides.Count 校验目标位置。需要移到末位时，目标页码取 ppt.Slides.Count，不要写一个固定的估算值。

多张幻灯片要一起调整顺序怎么办

原因：每设置一次 SlideNumber，其他页的位置都会立刻顺延，预先算好的下标可能随后失效。

解决：先规划最终顺序，再按目标顺序逐张设置目标页码。每移动一张后，其余页的当前页码已经变化，下一步要按新的位置重新定位，不要沿用移动前的旧下标。

调整顺序会改动幻灯片里的内容吗

原因：SlideNumber 改的是页在文稿中的先后位置，不触碰页面上的形状、文本与图片。

解决：移动后页面的内容、样式保持原样，只是先后次序变化。要删页仍用 Slides.RemoveAt()，要改内容则在移动后继续编辑对应形状。

获取免费许可证

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