Display PDF in Streamlit

Display PDF in Streamlit.py

def show_pdf(file_path):
    with open(file_path,"rb") as f:
        base64_pdf = base64.b64encode(f.read()).decode('utf-8')
    pdf_display = f'<iframe src="data:application/pdf;base64,{base64_pdf}" width="800" height="800" type="application/pdf"></iframe>'
    st.markdown(pdf_display, unsafe_allow_html=True)

show_pdf('post1-compressed.pdf')

This code is blocked when deploying to the streamlit community cloud - any idea why? I'm getting a "https://cs-practice-7gbnpyxkmg9.streamlit.app/"

Sorry, getting "This page has been blocked by Chrome" ***

Hello @Royz2123

Have you tried to get it to work?

@quantuan125 - yeah, I tried quite a bit but sadly no luck 😔

The best workaround I found was converting the PDF to an image and displaying it instead. Not ideal but does the job 🤷‍♂️

Hi @Royz2123

What solution did you find best in displaying the PDF as image?

I tried with fitz and PIL however, it kinda array display all images (=pages) from the PDF on the webapp. Do you use a placeholder or an image viewer or somethign that allows the ability to show one image and and "next"and "previous" button?

Thank you in advance

So basically I used the pdf2jpg library for converting the pdf into one long scrollable image. You can find the full code here, but the relevant snippet is:

if display_method == "images":
        # Create temporary folder for generated image
        tmp_sub_folder_path = create_tmp_sub_folder()

        # Save images in that sub-folder
        result = pdf2jpg.convert_pdf2jpg(pdf_path, tmp_sub_folder_path, pages="ALL")
        images = []
        for image_path in result[0]["output_jpgfiles"]:
            images.append(np.array(Image.open(image_path)))

        # Create merged image from all images + remove irrelevant whitespace
        merged_arr = np.concatenate(images)
        merged_arr = crop_white_space(merged_arr)
        merged_path = os.path.join(tmp_sub_folder_path, "merged.jpeg")
        Image.fromarray(merged_arr).save(merged_path)

        # Display the image
        st.image(merged_path)
        try_remove(tmp_sub_folder_path)

FYI. You can use a new component for pdf rendering, and more: https://github.com/lfoppiano/streamlit-pdf-viewer