必须使用HTTPS公网链接，直接嵌入.pptx无效；可行方案为Office Online Viewer（需URL编码和em=2参数）或导出PDF后iframe嵌入，后者更稳定可控。
iframe嵌入PPT必须用公开HTTPS链接
浏览器根本不认识 .pptx 文件，直接写 <iframe src="demo.pptx"></iframe> 会触发下载或显示空白，甚至报错 ERR_BLOCKED_BY_CLIENT。真正能用的只有两类地址：一类是微软 Office Online 的预览服务地址（如 view.officeapps.live.com），另一类是已托管在公网、带 HTTPS 且设为“任何人可查看”的文件直链（如 OneDrive/SharePoint 的共享链接）。本地路径 file:///、内网地址、未开启共享的 OneDrive 链接，全部无效。
Office Online Viewer 的 URL 拼接不能手写
手动拼 https://view.officeapps.live.com/op/embed.aspx?src=... 极易出错，常见问题包括：
-
src参数没做 URL 编码，含空格或中文时 iframe 加载失败 - 用了
onedrive.live.com原始分享链接，但没替换为view.officeapps.live.com前缀 - 漏了
em=2，导致嵌入后没有翻页控件，只能靠键盘方向键操作
更稳妥的做法是调用 Microsoft Graph API 获取 embedUrl——它返回的是带签名、有时效（约1小时）、已编码的临时地址，成功率远高于手拼。但前提是文件必须存在 OneDrive 或 SharePoint 文档库中，且你有对应权限。
PDF + iframe 是最可控的离线方案
如果你要部署在内网、不依赖第三方服务、或需响应式缩放，导出 PDF 再嵌入是最稳的选择：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- PowerPoint 自带“另存为 PDF”，保留字体、矢量图和排版，动画除外
- iframe 的
src直接指向该 PDF 文件，例如src="slides.pdf" - 务必加
sandbox="allow-scripts"，否则部分 PDF 查看器（如 Chrome 内置）无法启用缩放/翻页按钮 - 宽高建议用 CSS 控制（如
width: 100%; height: 600px;），避免固定像素值在小屏上溢出
注意：PDF 方案不支持原生 PPT 动画，但翻页逻辑稳定，且可配合 pdf.js 进一步接管导航（比如加自定义上一页/下一页按钮）。
Vue/React 项目里 iframe 尺寸容易塌陷
在组件化框架中，<iframe> 常因父容器未设高度而显示为一条细线，尤其在 Flex 或 Grid 布局里：
- 别只写
height: 100%，要确保所有上级元素（包括<body>）都有明确高度 - 推荐用
aspect-ratio: 16 / 9+width: 100%替代固定 height，适配不同屏幕 - 加载过程中加 loading 占位符，避免白屏；可用
onLoad事件监听 iframe 加载完成 - 若嵌入 Office Online，需注意国内网络可能拦截
view.officeapps.live.com，建议 fallback 到 PDF 方案
真实项目里，最常被忽略的是 sandbox 权限和 em 参数——一个导致按钮失效，一个导致跨域脚本被拒，两者都得实测确认，不能只看文档。
