Scrolling an embedded PDF

Using Streamlit
1

Hi guys,

I’m running my app locally right now. It’s an LLM powered CTRL+F search on steroids. I’m uploading a PDF, and getting an answer from said PDF, but I want to be able to scroll to and highlight the source of the answer within the PDF.

I just have no clue how to get the javascript into the rest of my python program in order to scroll the darn embedded PDF. Here’s my feeble attempt, can anyone make some suggestions or tell me what I’m doing wrong?:

        file = "c:/Users/zmzac/desktop/guideline_bling/10pages.pdf"

        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)

        # Scroll to and highlight text
        html = (f'''
        <alert> JS injected... </alert>
        <script>
        var container = document.getElementById("viewer");
        container.scrollTop = container.scrollHeight;
        </script>
        ''')

        if st.button("scroll"):
            st.components.v1.html(html)
2

hi @zakelectric
It looks like you’re trying to inject JavaScript into your Streamlit app to scroll to the bottom of the embedded PDF when a button is clicked. However, there are a couple of issues in your code:

  1. The container variable is attempting to reference an element with the id “viewer,” but it’s not clear from your provided code whether such an element exists in your HTML. You might need to inspect the generated HTML to find the correct element or add an id to the appropriate element.
  2. The st.components.v1.html method is used for rendering HTML components. However, it won’t necessarily execute JavaScript in the same way as if it were directly in the HTML. Instead, you can use st.markdown with unsafe_allow_html=True to render the HTML and execute the included JavaScript.
import streamlit as st
import base64

file = "c:/Users/zmzac/desktop/guideline_bling/10pages.pdf"

with open(file, "rb") as f:
    base64_pdf = base64.b64encode(f.read()).decode('utf-8')

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

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

# Scroll to and highlight text
html = (f'''
<alert> JS injected... </alert>
<script>
var container = document.getElementById("pdfViewer");
container.scrollTop = container.scrollHeight;
</script>
''')

if st.button("Scroll"):
    st.markdown(html, unsafe_allow_html=True)
3

Hey, is there any update, you got a way to scroll to a particular text in a pdf in streamlit ui, would be great if u could share, Thanks!

4

Hey bud,
Yeah I ended up using pdf.js and passing the search parameters to pdf.js through the URL where pdf.js is hosted (in AWS).
You can see my app at guideline-gopher.streamlit.app to get an idea of how i accomplished it.

5

Thanks dude, app works great!, looks like you are also trying to cite the answers for rag!

6

Answers for the rag? Sorry I don’t understand haha.
Feel free to DM me if you wanna hop on the phone or something and I can answer questions for you… I banged my head against the wall a LONG TIME to get this to work :rofl:

7

Yeah sure, can confirm trying to bring functionality of other web architecture in streamlit
is pain often, Thanks again!

8

Also, is this repo publically available anywhere, do lmk, it would be of great use if it is there!
Thanks in Adv :slight_smile:

1 Like
9

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.