Rendering PDF on UI

🎈 Using Streamlit
1

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:

image
image2880×1564 500 KB

Deployed:

image
image2880×1568 404 KB

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)
6 Likes
2

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>'
8 Likes
3

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

4

You made my day!

1 Like
5

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
6

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.

1 Like
7

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

8

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?

9

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

10

Same cloud issue

11

I am having the same issue using base64 encoding on streamlit cloud. This code snippet works great locally but not on the cloud version. Note that the URL is HTTPS. Any ideas on how to get this to display on Streamlit cloud? Right now, it shows an empty iFrame.

#function to display the PDF of a given file 
def displayPDF(file):
    # Opening file from file path. this is used to open the file from a website rather than local
    with urllib.request.urlopen(file) as f:
        base64_pdf = base64.b64encode(f.read()).decode('utf-8')

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

    # Displaying File
    st.markdown(pdf_display, unsafe_allow_html=True)
1 Like
12

Hey, I am going through the same issue, did you find out how to display pdf on cloud.

13

Hi Vishal, no sorry, no progress on this from my side.

14

Hey, is there any possibility to hide the download button in this pdf display?

15

any updates on how to render PDF on streamlit cloud?

16

This thread was marked as solved almost two years ago. What kind of updates are you expecting?

1 Like
17

Well from the replies it isn’t really solved, streamlit cloud still can’t render PDFs on Chromium browsers nor Safari, only FireFox

2 Likes
18

Last time I tried it worked in Edge (uses blink, does that make it qualify as a Chromium browser?) and Gnome Web (webkit, like Safari). Unfortunately I am unable to test Cromium and Safari.

19

Any Idea how I can get passed chrome blocking my pdf previews?

2 Likes
20

Hi there, im trying to highlight sentences on the PDF that is rendered.
Is there a way i can input a sentence through the UI and then have it highlighted in the rendered PDF. i know there is a search icon which does the same thing, but please share the code.