在blog中内嵌在线PPT

注：本文已发布超过一年，请注意您所使用工具的相关版本是否适用

有时我们会做一些分享，分享之后可以把 PPT 脱敏之后放在博客上面，可以使用 office online 直接内嵌 PPT, 巨硬大法好

需求

  1. 在线播放
  2. 支持动画
  3. 支持播放内嵌视频
  4. 自适应

上面的需求, WPS 云文档支持 1, 以及一些简单的动画，Office online 支持 1,2,3 第四点我们可以通过一个简单 js 脚本解决

获取分享链接

1.登录 https://onedrive.live.com 上传需要分享的 PPT 2.如下图所示 打开刚刚上传的 PPT 文件

3.点击右上角的文件 -> 共享 -> 嵌入

4.获取分享链接，将代码中的分享链接复制

1
2
3
4
5
6
<iframe src="这里是你的分享链接" width="350px" height="221px" frameborder="0"
  >这是嵌入
  <a target="_blank" href="https://office.com">Microsoft Office</a> 演示文稿，由
  <a target="_blank" href="https://office.com/webapps">Office Online</a>
  支持。
</iframe>

5.修改代码自适应，将上一步获取到的链接替换到下方代码中，复制粘贴到博客中即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<iframe
  id="ppt"
  width="100%"
  onload="autoChange()"
  src="在此处替换为你的PPT链接"
  frameborder="0"
></iframe>

<script>
  function autoChange() {
    let ifm = document.getElementById("ppt");
    ifm.height = (ifm.clientWidth / 16) * 9 + 24;
  }
  window.onresize = autoChange;
</script>

示例

https://lailin.xyz/post/notes/pprof-go%E6%80%A7%E8%83%BD%E5%88%86%E6%9E%90%E5%B7%A5%E5%85%B7/

总结

Office Online 对于 PPT 支持相当的好，唯一的缺点可能就是在国内有些的确被墙，可能需要 FQ 才能访问

关注我获取更新

wechat
知乎
github

猜你喜欢

blog

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处，禁止全文转载