如何将 Firebase 存储中的文档嵌入 Google/Microsoft 文档查看器答案

【问题标题】：How to embed documents from firebase storage into Google/Microsoft document viewer如何将 Firebase 存储中的文档嵌入 Google/Microsoft 文档查看器
【发布时间】：2021-10-01 05:11:01
【问题描述】：

Google Docs 和 Microsoft Office Live 无法从 Firebase 存储中嵌入/呈现 doc/pdf/ppt 文件。我什至将我的 Firebase 存储规则设置为可公开访问。我还尝试使用 javascript encodeURIComponent 嵌入网址 | encodeUri 仍然没有解决我的问题。

//This is the public url of .ppt that I want to display in my html website:

https://firebasestorage.googleapis.com/v0/b/work-from-home-app.appspot.com/o/tasks%2Fwqk5vnsYlySImAbukg5Z%2Ftest.pptx?alt=media&token=0eabee36-844f-47de-b643-6fa7d8841dfe

我尝试了几种方法，如下所示：

    <!-- This one from google docs doesnt work -->
    <iframe src="//docs.google.com/gview?alt=media&embedded=true&url=https://firebasestorage.googleapis.com/v0/b/work-from-home-app.appspot.com/o/tasks%2Fwqk5vnsYlySImAbukg5Z%2Ftest.pptx?alt=media&token=0eabee36-844f-47de-b643-6fa7d8841dfe" style="width:600px; height:500px;" frameborder="0"></iframe>

    <!-- This one from microsoft doesnt work either -->
    <iframe src="https://view.officeapps.live.com/op/embed.aspx?src=https://firebasestorage.googleapis.com/v0/b/work-from-home-app.appspot.com/o/tasks%2Fwqk5vnsYlySImAbukg5Z%2Ftest.pptx?alt=media&token=0eabee36-844f-47de-b643-6fa7d8841dfe" style="width:600px; height:500px;" frameborder="0"></iframe>

遗憾的是，上述方法均无效。但是当我尝试从某人的网站嵌入 .ppt 时，它工作正常。

 <!--  This one works!  -->
 <iframe src="//docs.google.com/gview?alt=media&embedded=true&url=http://video.ch9.ms/build/2011/slides/TOOL-532T_Sutter.pptx" style="width:600px; height:500px;" frameborder="0"></iframe>

我猜我的 Firebase 存储有问题？或者根本不可能将文档文件从 firebase 渲染/显示到 google docs 或 microsoft api？

【问题讨论】：

请帮帮我..

标签： html firebase firebase-storage

【解决方案1】：

我终于解决了！

我最终使用了谷歌文档查看器，我无法弄清楚微软的那个。

它无法读取我的文档的原因是因为我绑定我的 url 的 api 由于某种原因无法正常工作。

>This one doesn't work
https://docs.google.com/gview?alt=media&embedded=true&url=my_url

>Works for me
https://drive.google.com/viewerng/viewer?embedded=true&url=my_url

请注意，您需要将 url 编码为 encodeURIComponent 如果您使用 javascript 来工作。

【讨论】：