How to render PDFs in Apps

pdf.py

from h2o_wave import main, app, Q, ui


@app('/')
async def serve(q: Q):

    q.page["meta"] = ui.meta_card(
        box="",
        layouts=[
            ui.layout(
                breakpoint="xs",
                height="100vh",
                zones=[
                    ui.zone("main", direction="row", size="1"), # size=1 to take up all the space on the screen
                ]
            )
        ]
    )
    
    # Example of PDF from public URL, using the ui.markup component, we can also use the ui.text component
    q.page["pdf_from_public_website"] = ui.form_card(
        box="main",
        items=[
            # We can use a ui.markup, a ui.text, or other components, either will work
            ui.markup(content="<object data='https://arxiv.org/pdf/2401.16818.pdf' type='application/pdf' width='100%' height='1000px'></object>")
        ]
    )

    # This is just to get a PDF locally for this demo, your app probably has a PDF locally already
    local_file = "example.pdf"
    import requests
    url = "https://arxiv.org/pdf/2401.16818.pdf"
    response = requests.get(url)
    with open(local_file, "wb") as f:
        f.write(response.content)

    # Move a local file "into" wave (save into q.app or q.client if you want ot have the file later)
    # I will use a "normal" variable because I am using the file right away and don't need it later
    (file_in_wave, ) = await q.site.upload(files=[local_file])
    print(file_in_wave)

    # Example of PDF from local file, using the ui.text component, we can also use the ui.markup component
    q.page["pdf_from_local"] = ui.form_card(
        box="main",
        items=[
            ui.text(f"<object data='{file_in_wave}' type='application/pdf' width='100%' height='1000px'></object>")
        ]
    )

    await q.page.save()