如何在移动浏览器的html（react）中嵌入来自firebase存储的pdf文件答案

【问题标题】：How to embed a pdf file from firebase storage in html(react) in mobile browsers如何在移动浏览器的html（react）中嵌入来自firebase存储的pdf文件
【发布时间】：2020-11-17 10:55:37
【问题描述】：

我在 firebase 存储中有一个 pdf 文件，其 url 如下： https://firebasestorage.googleapis.com/v0/b/xxxxxx.appspot.com/o/projectPdfs%2FSuperImportant%20Project.pdf?alt=media&token=0b351324-1ae5-4997-8e7c-f17039a1d3b2

我想以某种方式在我的反应应用程序中显示它。我尝试使用 html 对象、嵌入和 iframe。所有这三种方法都不适用于移动浏览器。它只显示一个“打开”按钮，点击后会自动将 pdf 下载到设备中。

我还尝试将 pdf 链接附加到 google PDF 查看器 url。

喜欢

<iframe src=`https://drive.google.com/viewerng/viewer?url=${my_firebase_pdf_url}` width="400px" height="300px"  />

但这也没有奏效。现在，“打开”按钮显示单击该按钮会打开一个新选项卡，并显示“没有可用的预览”以及下载文件的选项。我尝试使用未存储在 firebase 中的其他 pdf 文件的 url，现在它似乎工作正常。

我不想将 pdf 下载到设备。我只需要以某种方式嵌入它，就像它在桌面版本中的完美运行方式一样。

我尝试了 react-pdf、pdf-viewer-react-js 等库，但它们都帮不了我。我已经挣扎了5天了。这是 firebase 存储 url 的问题吗？是否会使用其他后端（如 node 和 mongoDB）来解决问题？

【问题讨论】：

标签： javascript html reactjs firebase pdf

【解决方案1】：

您的浏览器似乎无法原生呈现 pdf。此外，您提供的网址似乎是错误的，您可能需要更正。更正网址后，使用下面的网址在手机浏览器中打开文件。

“http://docs.google.com/gview?embedded=true&url=yourfileurl”

【讨论】：

您好，网址的 xxxxxxx 部分是故意隐藏的，以防止有人通过多次调用它并达到 Firebase 调用限制而滥用它。另外我说的浏览器是Android中的普通chrome浏览器（最新版本）。我尝试使用这种docs.google.com/gview?embedded=true&url=yourfileurl格式，但我担心它仍然没有在移动浏览器上加载
检查您的浏览器是否更新到最新版本。