同一份演示文稿，投到会议室大屏、交给打印店、或者做成手机竖屏浏览，页面尺寸往往要跟着换。在桌面软件里逐份调整，批量处理时只能有人守着点；放到服务端改，文件上传后也就不在用户的设备上了。

本文用 Spire.Presentation for JavaScript 在浏览器里更改 PowerPoint 幻灯片大小。它基于 WebAssembly 在浏览器端运行，通过 SlideSize 控制页面宽高，无需安装 Office，也不依赖后端，文件始终留在用户的设备上。

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

• 按预设尺寸更改 PowerPoint 幻灯片大小
• 自定义 PowerPoint 幻灯片尺寸

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

按预设尺寸更改 PowerPoint 幻灯片大小

Spire.Presentation for JavaScript 提供 ppt.SlideSize.Type 属性，用于把页面切换到常用的屏幕或纸张规格。赋值后页面宽高直接由预设决定，不需要再传尺寸：

SlideSizeType 里还有 Letter、A3 等规格，按目标页面从这个枚举中取值即可。

具体操作步骤如下：

1. 获取 Spire.Presentation 的 WASM 模块，确认已就绪。
2. 读入示例演示文稿与字体，创建 Presentation 对象并加载该文件。
3. 将 Presentation.SlideSize.Type 设置为目标预设值。
4. 使用 Presentation.SaveToFile() 方法保存结果文件。
5. 从 VFS 读出结果文件并触发浏览器下载。

按预设尺寸更改幻灯片大小的代码如下：

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

    // 把页面从 16:9 切换为 4:3，宽高由预设自动调整为 720 × 540 磅
    ppt.SlideSize.Type = pptModule.SlideSizeType.Screen4x3;

    // 保存结果文件
    const outputFileName = '改为4比3后.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={changeTo4x3}>
        改为 4:3
      </button>
    </div>
  );
}

export default App;

把 16:9 的演示文稿改成 4:3 后的页面：

自定义 PowerPoint 幻灯片尺寸

Spire.Presentation for JavaScript 还提供 ppt.SlideSize.Size 属性，用于指定任意宽高。它接收一个 SizeF 对象，单位是磅。给 Size 赋值后，页面类型自动变成 SlideSizeType.Custom。

具体操作步骤如下：

1. 获取 Spire.Presentation 的 WASM 模块，确认已就绪。
2. 读入示例演示文稿与字体，创建 Presentation 对象并加载该文件。
3. 用 SizeF 构造目标宽高，赋给 Presentation.SlideSize.Size。
4. 使用 Presentation.SaveToFile() 方法保存结果文件。
5. 从 VFS 读出结果文件并触发浏览器下载。

自定义幻灯片尺寸的代码如下：

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

    // 600 × 900 磅：宽高都自定义，页面自动切到 Custom 类型
    ppt.SlideSize.Size = new pptModule.SizeF(600, 900);

    // 保存结果文件
    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={setCustomSize}>
        设置自定义尺寸
      </button>
    </div>
  );
}

export default App;

设置成 600 × 900 磅后的页面：

常见问题

SlideSize.Size 的单位是什么

原因：SlideSize 的宽高以磅（point）计量，1 英寸等于 72 磅。new SizeF(600, 900) 对应 8.33 × 12.5 英寸，而不是 600 × 900 像素。

解决：按磅传入宽高。常见的 16:9 宽屏是 960 × 540，4:3 是 720 × 540，从厘米或毫米换算时先折算成英寸，再乘以 72。

只设置 Size，为什么 SlideSize.Type 变成了 Custom

原因：Size 是自定义尺寸的入口。赋值后库把 SlideSize.Type 置为 SlideSizeType.Custom，并根据宽高关系推导 Orientation。

解决：自定义尺寸只设 Size 即可。若随后又把 Type 设成某个预设，页面宽高会被该预设覆盖；预设与自定义尺寸不要混用。

更改幻灯片大小后，页面上的内容会跟着缩放吗

原因：形状会按新旧尺寸的比例重新定位：横坐标与宽度按宽度比调整，纵坐标与高度按高度比调整。文本框随新宽度重新换行，文字较多或贴近边缘的页面可能显得拥挤。

解决：换完尺寸后检查文字密集的页面，必要时调小字号或挪动形状。库已经做过一次等比缩放，不要再按同一比例手动乘一遍，否则会出现二次缩放。

获取免费许可证

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