Change the display position of an html file on a webpage in Streamlit

Using Streamlit
1

I am using Streamlit to build an app.

I have no front-end experience or expertise.

I have an use case where I want to display a sample pdf file on the left hand side and an html file having a sample extraction from the pdf on the right hand side.

Presently it’s coming one below the other.

My html file reads like this:

    <body style="background-color:White 	    ;">
    <div class="ui form">
     <div class="fields">
       <div class="field">
         <label>Student Name</label>
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="63" placeholder="Roger">
         <p>
       </div>
       <div class="field">
         <label>Branch</label>
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size='15' placeholder="Section B">
         <p>
       </div>
     <div class="field">
       <div class="field">
         <label>Subject</label>
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size='15' placeholder="Physics">
         <p>
       </div>
       <div class="field">
         <label>Grade</label>
         &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size='15' placeholder="A">
         <p>
       </div>

and my code reads like:

    import streamlit as st
    import streamlit.components.v1 as components
    import base64
    
    
    st.header("test html import")
    
    HtmlFile = open("test.html", 'r', encoding='utf-8')
    source_code = HtmlFile.read() 
    print(source_code)
    components.html(source_code, height= 1600, width=1600)
    
    
    
    with open("Datafile.pdf", "rb") as pdf_file:
        base64_pdf = base64.b64encode(pdf_file.read()).decode('utf-8')
    
    
    pdf_display = f'<embed src="data:application/pdf;base64,{base64_pdf}" width="700" height="1000" type="application/pdf">' 
    st.markdown(pdf_display, unsafe_allow_html=True)

I just want to display the 2 things(pdf&html) side by side. Any help on how to solve this?

2

Hi @Myntur,

For future reference, @chris_klose has provided a solutione here:

Something like (totally untested! Hope it can get you started :slight_smile: ):

c_left, c_right = st.beta_columns(2)
with c_left:
    HtmlFile = open("test.html", 'r', encoding='utf-8')
    source_code = HtmlFile.read() 
    print(source_code)
    components.html(source_code, height= 1600, width=1600)
with c_right:
    with open("Datafile.pdf", "rb") as pdf_file:
        base64_pdf = base64.b64encode(pdf_file.read()).decode('utf-8')
    pdf_display = f'<embed src="data:application/pdf;base64,{base64_pdf}" width="700" height="1000" type="application/pdf">' 
    st.markdown(pdf_display, unsafe_allow_html=True)

Best,
Fanilo

2 Likes
3

@andfanilo Thank you so much. Really really grateful :slight_smile:

4

can we show a pdf with a focusing specific page, as an example if I want to show pdf with page number 2 is there a way to do that?