PowerPoint Add-In开发：如何添加指定URL的iframe至幻灯片？

• 核心逻辑：PowerPoint JS API不支持直接添加iframe，但原生的Web Viewer形状可以实现网页嵌入，且支持正常保存演示文稿
• 完整实现代码：

// 假设getIFrame()是获取用户输入URL的函数
function getIFrame() {
  // 替换为你获取文本框URL的逻辑，比如从输入框取值
  return document.getElementById("urlInput").value;
}

async function addWebViewerToNewSlide() {
  const targetUrl = getIFrame();
  if (!targetUrl) {
    alert("请输入有效的URL");
    return;
  }

  await PowerPoint.run(async (context) => {
    // 1. 在演示文稿末尾添加新幻灯片
    const slides = context.presentation.slides;
    const newSlide = slides.add(slides.getItemCount(), "Title and Content");
    context.load(newSlide);
    await context.sync();

    // 2. 在新幻灯片上添加Web Viewer形状
    const shapes = newSlide.shapes;
    // 可根据需求调整位置、大小参数
    const webViewer = shapes.addWebViewer(
      100, // 左侧距离（像素）
      100, // 顶部距离（像素）
      600, // 宽度（像素）
      400, // 高度（像素）
      targetUrl
    );

    // 可选：设置形状名称，方便后续操作
    webViewer.name = "EmbeddedWebPage";

    await context.sync();
    alert("网页已成功嵌入新幻灯片");
  }).catch((error) => {
    console.error("操作失败：", error);
    alert(`嵌入失败：${error.message}`);
  });
}

• 关键说明：
  • 之前方案失败原因：你尝试的内容应用iframe属于网页端临时元素，并非PPT原生支持的对象，无法被序列化保存到演示文稿中
  • Web Viewer是PPT原生形状，会被正常保存，打开演示文稿时会自动加载指定URL的内容
  • 可根据需求调整addWebViewer的位置、大小参数，或设置形状的边框、填充等属性

内容的提问来源于stack exchange，提问作者Mr.Hanky