在网页中嵌入PowerPoint演示文稿

18

有没有办法仅使用标准标签等在HTML页面中嵌入PowerPoint幻灯片演示文稿?我尝试使用iframe,但那只会导致PowerPoint被下载。

<iframe src="Chapter1.pptx">Your browser does not support.</iframe>

我正在寻找一种只使用标准工具来展示幻灯片的方法。我知道我可以使用Google文档或Flash等工具,但我更愿意采用简单的实现方式。

难道Web就无法处理PowerPoint演示文稿吗?


可能是将PowerPoint嵌入HTML的重复问题。 - Marko
2
我说过我不想使用谷歌文档。 - Snowy Coder Girl
1
它列出了其他可能的解决方案,请查看被接受答案下面的答案。 - Marko
我看到了一些关于Flash和其他应用程序的东西,但我会再深入研究一些。 - Snowy Coder Girl
Google Docs是一种简单的实现。 - djlumley
11个回答

72

简单明了……这是将任何 Microsoft 或 Adobe 文件嵌入 HTML 网站的最佳方法。

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=[https://www.your_website/file_name.pptx]' width='100%' height='600px' frameborder='0'>


2
我不知道为什么你的回答没有得到更多的赞。它是最接近提问者原意的答案。 - EugZol
6
这个答案适用于内部网站上的演示不起作用。 - NetMage
2
<iframe width="100%" height="630" src="https://docs.google.com/viewer?url=your_file&embedded=true" ></iframe> - Alexis Cabrera Mondeja
1
JS var url = encodeURIComponent(originalURl); 中文: var url = encodeURIComponent(originalURl); HTML:<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=${url}&#39; width='100%' height='600px' frameborder='0'> - Anil
3
截至2022年,我无法让上述答案工作。我已将URL更新为我上传到GitHub共享点中的真实卡片组。我认为view.officeapps.live.com/op/embed...不再存在了。 - Lance Kind
显示剩余4条评论

15

更新此问题的方法:现在有一种新的方法可以在网页中嵌入Powerpoint。如果您在OneDrive上有帐户,请使用Powerpoint Online (通过浏览器访问Powerpoint)执行以下操作以嵌入Powerpoint:

  1. 单击“文件”,然后单击“共享”,再单击“嵌入”Share Powerpoint
  2. 单击“生成”按钮以生成要嵌入的HTML代码Generate HTML
  3. 复制“嵌入代码”并将其粘贴到网站的HTML中Copy Embed Code

2
这真是出乎意料的容易! - Gregg Bursey
嘿,请给我一个解决方案,如果不将PPT放在驱动器上并从服务器上获取它们,他们该如何做到这一点? - user7918630
1
需要观看者拥有微软账户,这对于公共网站来说并不是一个好的解决方案。 - sspence65

5

网页浏览器无法识别PowerPoint,但除了Flash之外还有其他解决方案。

您可以将PowerPoint导出为HTML或PDF格式。或者您也可以将其上传到类似slideshare这样的网站,并使用他们专门为此问题设计的播放器。


1
+1,感谢您的帮助。我已经决定使用YouTube(请参见答案)。再次感谢。^_^ - Snowy Coder Girl
嘿,请给我一个解决方案,如果不把 ppt 放在驱动器上并从服务器上获取它,他们该如何处理? - user7918630

3

我决定采用一种简单的方法,将PowerPoint上传到YouTube,然后在iframe中包含YouTube视频。

<iframe height="375" width="600" src="http://www.youtube.com/embed/assignedId"></iframe>

我知道,这很便宜,但也很容易。

编辑

最终,我将页面检查为XHTML Strict格式,该格式不支持<iframe>标签。因此,我使用了object标签代替。

<object data="http://www.youtube.com/embed/assignedId"> 

嘿,请给我一个解决方案,如果不将PPT放在驱动器上并从服务器上获取它们,他们该如何做到这一点? - user7918630

3
我尝试了Shane发布的答案,它看起来完全正确,就像微软以前在线查看PPT那样,但对我没有用。通过一些研究,我发现链接有点变化。
所以使用: https://view.officeapps.live.com/op/view.aspx 代替 https://view.officeapps.live.com/op/embed.aspx 例如:
<iframe src='https://view.officeapps.live.com/op/view.aspx?src=[https://www.your_website/file_name.pptx]' width='100%' height='600px' frameborder='0'>

注意:PPT的链接需要公开访问。

2
我更喜欢谷歌文档查看器与文档、pptx、pdf等文件一起使用。 <iframe width="100%" height="630" src="https://docs.google.com/viewer?url=your_file&embedded=true"></iframe> - Alexis Cabrera Mondeja
PPT中的动画和效果在Google文档查看器中无法正常工作。 - SumitK
但是您可以使用“打开方式”并使用Google演示应用程序。 - Alexis Cabrera Mondeja
我不确定是否可以像我们在MS中那样直接通过链接完成。此外,我相信使用Google幻灯片需要使用Google账户登录。 - SumitK

2

<iframe src="http://r.office.microsoft.com/r/rlidPowerPointEmbed?p1=1&p2=1&p3=SD20F065AFC1ACDB2E!723&p4=&kip=1" width="402" height="327" frameborder="0" scrolling="no"></iframe> - Carlos Soto Johnson
查看此网站的代码,http://crc.tc/powerpointDemo.html,并将SD20F065AFC1ACDB2E!723替换为您自己的幻灯片URL标识符。 - Carlos Soto Johnson

1

在您的Google Drive上上传一个PowerPoint文档,然后与所有人“分享”(使其公开): 分享pptx文档

然后,转到“文件”>“发布到网络”>点击发布按钮。

进入“嵌入”并复制嵌入代码,将其粘贴到您的网页中

复制嵌入代码


1

0
如果您正在使用Google幻灯片,您可以轻松地将其发布到Web上,并在iframe中嵌入幻灯片。
前往Google幻灯片->文件->共享->嵌入并复制代码。

enter image description here

然后在你的HTML文件中使用以下代码以全屏模式显示幻灯片。

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/journey.css">
    </head>
<body>
    <!-- show slides in html web page -->
    <iframe src="https://docs.google.com/presentation/d/e/2PAxxxxxCX-xxxxxxxx-_GuZImZqRUxxxxxxxxxx/embed?start=true&loop=false&delayms=3000" frameborder="0" width="1440" height="839" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
</body>
</html>

-1

我通过将PPT另存为mp4格式(另存为 > MPEG-4 视频 (*.mp4))并使用视频标签来实现这一点。

<video controls autoplay preload="none" style="width:1000px;">
<source src="/_dev/power_point/m11983.mp4" type="video/mp4" />
<p>Your browser does not support HTML5 Video.</p>
</video>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接