在blog中内嵌在线PPT

综合技术 2018-12-08 阅读原文

有时我们会做一些分享,分享之后可以把 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.获取分享链接,将代码中的分享链接复制

<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.修改代码自适应,将上一步获取到的链接 替换到下方代码中,复制粘贴到博客中即可

<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 才能访问

责编内容by:Mohuishou 【阅读原文】。感谢您的支持!

您可能感兴趣的

How to Get the current Page URL with JavaScript To get the current web page URL of your browser you need to grab the window.location.href property. Type the foll...
动手制作一个简易的iOS动态执行器 之前听说滴滴的 DynamicCocoa 是基于JavaScriptCore搞得,一直期待看到他们的真正实现,不过可能后来由于公司机密,应该不能再开源了。 借着最近开始研究JavaScriptCore的契机,我决定利用这一两天所学的...
Android – WebView详解 老婆保佑,代码无BUG 前言 权当给自己的记录,而且WebView 坑很多 目录 一:生命周期 二:WebView 主要的3个类 Web...