Rendering PDF on UI

Currently, on my local, I’m able to successfully render PDF files onto my UI. However, as I’m trying to deploy the app I’m running into the PDF file not being shown on the UI.

As you can see through the inspect tools, the file’s component is being generated.

Local:

Deployed:

Code:

def displayPDF(file):
    # Opening file from file path
    with open(file, "rb") as f:
        base64_pdf = base64.b64encode(f.read()).decode('utf-8')

    # Embedding PDF in HTML
    pdf_display = F'<embed src="data:application/pdf;base64,{base64_pdf}" width="700" height="1000" type="application/pdf">'

    # Displaying File
    st.markdown(pdf_display, unsafe_allow_html=True)
2 Likes

Using iframe instead of embed worked like a charm.

pdf_display = F'<iframe src="data:application/pdf;base64,{base64_pdf}" width="700" height="1000" type="application/pdf"></iframe>'
3 Likes

is there a way i could save the streamlit presentation into pdf?? like provide a form of report

You made my day!

1 Like

Hello, I am wondering if there is a possibility to display a pdf on streamlit but without the possibility for the user to download it?

1 Like

With the above solution, I would attempt to disable the download button itself through code.

However, another solution may be rendering png/jpg files to your app. That way users would have to right click to save if they really tried to.

Thanks @antoneev! If you have any reference on how to disable it with code, it would be very helpful! Thanks very much

I can get this approach working on Safari without a problem, but the PDF does not render on Chrome - I think because of sandbox restrictions. Has anyone else encountered this problem? If so, were you able to come up with a code-based workaround?

same issue for me with a pdf viewer working like a charm on-premise but failing to display on Streamlit-cloud because blocked by chrome. Any update about it or any by-pass? Thx

Same cloud issue