如何在移动浏览器的 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

I want to somehow display this in my react app. I tried using using html object, embed and iframe. All these three methods does not work in mobile browsers. It just shows an 'open' button and when clicked automatically downloads the pdf into the device.

I also tried appending the pdf Link to a google PDF viewer url.

Like

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

But this didn't work as well. Now an 'open' button shows which when clicked opens a new tab and says 'no preview available' with an option to download the file. I tried with the urls of other pdf files not stored in firebase and now it seems to work fine.

I don't want to download the pdf to the device. I just need to embed it somehow like how it works perfectly in the desktop versions.

I tried libraries like react-pdf, pdf-viewer-react-js etc, but all of them couldn't help me. I've been struggling for 5 days now. Is this the problem of firebase storage urls and will using someother backend (like node and mongoDB) fix the problem?

Answer 1

Seems like your browser cannot render pdfs natively. Also the url you have provided seems to be wrong you might want to correct that. After correcting the url use the url below to open the file in mobile browser.

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