如何在移動瀏覽器的 html(react) 中嵌入 firebase 存儲中的 pdf 文件

Question

I have a pdf file in firebase storage with a url like: https://firebasestorage.googleapis.com/v0/b/xxxxxx.appspot.com/o/projectPdfs%2FSuperImportant%20Project.pdf?alt=media&token=0b351324-1ae5 -4997-8e7c-f17039a1d3b2

我想以某種方式在我的反應應用程序中顯示它。 我嘗試使用 html object、嵌入和 iframe。 所有這三種方法都不適用於移動瀏覽器。 它只顯示一個“打開”按鈕，單擊時會自動將 pdf 下載到設備中。

我還嘗試將 pdf 鏈接附加到谷歌 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）來解決問題？

Answer 1

似乎您的瀏覽器無法原生呈現 pdf。 此外，您提供的 url 似乎是錯誤的，您可能需要更正它。 更正 url 后，使用下面的 url 在移動瀏覽器中打開文件。

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