React的Powerpoint查看器？

Question

我为此搜索了很多，但是找不到任何关于如何使用React.js在网页上查看“.ppt”文件的包或指南。

我允许用户上传“.ppt”文件，并希望他能够在网页中查看这个“Powerpoint”文件，这是否可能？

我尝试了以下方法，但它并没有成功...

<iframe
    src={`https://view.officeapps.live.com/op/embed.aspx?src=[${linkToPPTFile}]`}
    width="100%"
    height="600px"
    frameBorder="0"
></iframe>

非常感谢您的帮助。

- Ruby

Answer 1

我也遇到了类似的问题。问题出在你的iframe的src中的src=[${linkToPPTFile}]这一部分。移除方括号即可解决问题。应该改为：src=${linkToPPTFile}。

<iframe
    src={`https://view.officeapps.live.com/op/embed.aspx?src=${linkToPPTFile}`}
    width="100%"
    height="600px"
    frameBorder="0"
>
</iframe>

- Allan Mogusu

Answer 2

我已经寻找答案有一段时间了，偶然发现了一个解决方案，我认为这个方案也适用于你的情况。我使用了react-doc-viewer库，它可以让您显示多种文件类型，如ppt、word、excel等。您可以使用npm安装它，在此链接上查看更多详细信息https://www.npmjs.com/package/react-doc-viewer，然后简单地创建一个自定义的查看器组件，以便您可以重复使用它来查看您的文件。

- James Mtendamema

Answer 3

看起来特定的 Microsoft 嵌入链接已经失效了。一个方法是将 PowerPoint 文件存储在公共网上文件夹中，并在 PowerPoint for the Web 中创建一个嵌入代码 (https://www.office.com/launch/powerpoint)。嵌入代码应该包括一个 <iframe/> 标签。

有关此过程的更多信息在这里：https://support.office.com/en-us/article/Embed-a-presentation-in-a-web-page-or-blog-19668A1D-2299-4AF3-91E1-AE57AF723A60

- Ed Lucas

---

刚刚重新阅读了问题。我会查看是否可能允许用户上传文件。 - Ed Lucas

Answer 4

如果您有后端，它是使用node.js构建的，并且您将完全控制生产服务器（即能够在其中安装软件），则可以尝试使用ppt-png包转换为png。在幕后，它使用libreoffice进行ppt-pdf转换，然后使用imagemagick进行pdf-png转换，这是完成任务的最佳方法。

- Gennady Dogaev

---

我认为这可能是唯一的解决方法，而且我对后端有控制权，但是它是用PHP构建的 :(. 我会尝试弄清楚如何在服务器端处理并将PNG发送回前端。 - Ruby

@Ruby 结合这两个库可能会解决问题: office-converter, pdf-to-image。它们使用相同的原理，并需要安装libreoffice，imagick和ghostscript。 - Gennady Dogaev

Answer 5

这里有一些类似的信息在这里。

从我所读的来看，似乎你可以将PowerPoint转换为Flash并显示它们，或者可能使用像Slideshare或Google幻灯片扩展这样的工具。

希望这能帮到你！

- emoore

---

不幸的是，这些选项对我的情况不起作用。不过还是谢谢你的努力:) - Ruby

Answer 6

我找到的唯一可能的用户上传PPT解决方案是将文件副本上传到One Drive，使用Microsoft的API：https://learn.microsoft.com/en-us/onedrive/developer/rest-api/concepts/upload?view=odsp-graph-online

然后，您可以使用API创建“共享链接”。共享文件的URL在API响应中返回（https://1drv.ms/..），任何使用链接的人都可以访问文档以在线查看。请参见：https://learn.microsoft.com/en-us/onedrive/developer/rest-api/api/driveitem_createlink?view=odsp-graph-online

- Ed Lucas

---

那对我不起作用，我需要一种直接显示PPT文件的方法（作为API响应的链接），或者以某种方式将该文件转换为图像数组以将其显示为滑块。 - Ruby

看起来可以通过API将文件复制到OneDrive后，使用“createLink”创建链接的“嵌入式”版本。 - Ed Lucas

是的，也许可以，但这需要重新购买 OneDrive 上的空间，这将导致另一层复杂性。 - Ruby

如果您更喜欢将PPTX文件转换为图像，似乎在github上有大量的选项（https://github.com/search?q=ppt+to+image），以及一些商业API（https://developers.zamzar.com/）。 - Ed Lucas

你有将PPT文件转换为图像的代码示例吗？ - Ruby

抱歉，我没有。 - Ed Lucas