如何将Firebase Storage存储的文档嵌入谷歌/微软官方文档查看器

问题原因 #

你直接将未编码的Firebase Storage文件链接拼接到查看器的查询参数中时，Firebase链接自带的?alt=media&token=xxx参数会被谷歌/微软的查看器服务识别为查看器自身的参数，导致传递给Firebase的文件请求参数缺失，无法获取到正确的文件资源。你之前用encodeURI编码无效的原因是该方法不会转义?、&这类参数分隔符，解决不了参数冲突问题。

解决方法 #

将完整的Firebase Storage文件公共链接全程使用encodeURIComponent编码后，再拼接到查看器的url/src参数中即可。

修复后的嵌入代码示例 #

谷歌文档查看器

<iframe src="//docs.google.com/gview?embedded=true&url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fwork-from-home-app.appspot.com%2Fo%2Ftasks%252Fwqk5vnsYlySImAbukg5Z%252Ftest.pptx%3Falt%3Dmedia%26token%3D0eabee36-844f-47de-b643-6fa7d8841dfe" style="width:600px; height:500px;" frameborder="0"></iframe>

微软Office在线查看器

<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fwork-from-home-app.appspot.com%2Fo%2Ftasks%252Fwqk5vnsYlySImAbukg5Z%252Ftest.pptx%3Falt%3Dmedia%26token%3D0eabee36-844f-47de-b643-6fa7d8841dfe" style="width:600px; height:500px;" frameborder="0"></iframe>

注意事项 #

• 动态生成嵌入链接时，直接在JS中对完整的Firebase文件公共链接执行encodeURIComponent()后再拼接即可，不需要额外处理路径编码。
• 需确认对应文件路径的Firebase Storage规则已放开公开读权限，无需身份验证即可直接访问文件。

内容的提问来源于stack exchange，提问作者Darwin Marcelo