Pdf display blocked by Chrome

Hi everyone,
I have the following issue with my app after deployment on Streamlit Cloud : I display a pdf file by giving its URL by using a markdown component located in an expander component. It works fine locally and I have read posts about the difference between using an iframe vs. embed. But once running in the cloud, I cannot display the pdf as the “page has been blocked by Chrome”.
Any idea?
Thanks and have a good week-end
Jerome

4 Likes

I am struggling with the same but I couldn’t find any solution to this.

@Jerome_MASSOT @Tushar_Bhatnagar how did you solve this in the end??

I got the same issue.
Search and read a lot but can’t find a solution.
I can display PDF with Firefox but Chrome and Safari.

Any suggestion ?
Thanks

Did you manage to fix it ? I am stuck with the same situation

looking for solution here as well, if anybody found a solution since then :slight_smile:

Anyone with any solution?? please help!

Also having the exact same issue, nothing works …
Please help!

Nothing works !!!

I have the same problem. My app works only in firefox. Waiting for a solution

Me too. It only works on Firefox. Failed on Edge and Chrome

you can try converting it to jpg and the upload?

You can try converting it to a jpeg and also adding a button to download the pdf

I suddenly found a way. Directly pass base64 strings as content of PDF is very redundant.

Using url like “src=http://localhost:8900/filename.pdf” is a much more relaxed way. Therefore, we can choose directly store the pdf file uploaded by user:

uploaded_file = st.sidebar.file_uploader(
    label="Upload PDF files", type=["pdf"], accept_multiple_files=False
)

if not uploaded_file:
    st.session_state.clear()
    st.info("请在左侧上传您的PDF文件")
    st.stop()

@st.cache_resource(ttl="1h")
def configure_PDF(file):
    with open(os.path.join("/your_path/user_upload_pdfs", file.name), "wb") as f:
        f.write(uploaded_file.getvalue())

The next step is to start up a HTTP server locally by:

python -m http.server 8900

at /your_path/user_upload_pdfs.

Then files can be accessed by ‘http://localhost:8900/filename.pdf’

Finally, with any type of component like “embed”, “iframe” or “object” to view a PDF in Browser, writing HTML like:

embed src=“http://localhost:8900/{file.name}” type=“application/pdf” width=“1000px” height=“1100px”

In a production environment considering privacy, you can do more development on the HTTP server that temporarily stores PDF files.

Can you share an example of what streamlit function you used to render the PDF? For example I tried (with no success):

pdf_display_http = f'<embed src=“http://localhost:8900/{file.name}” type=“application/pdf” width=“1000px” height=“1100px”></embed>'

st.markdown(pdf_display_http, unsafe_allow_html=True)

Where the PDF should be, the app says localhost refused to connect.

How does it work when you deploy in cloud say streamlt community cloud ?