export entire page as an image/a pdf file and upload to server?

[retsyo]

Question

As the title says, any way to export the whole webpage, who maybe very long, as an image or a pdf on client(for example, students) side, and then the exported file is uploaded to the server(for example, teacher)?
Thanks

[falkoschindler]

There's nothing built in NiceGUI to do that. I would recommend looking for a JavaScript solution and call it from your app. But I'm not sure if it's possible at all.

Apart from that you could create a server-side rendering, e.g. by drawing the UI elements to an image or by generating and compiling LaTeX code. Whether this is feasible, depends on your application.

[falkoschindler]

As an example for the LaTeX-based approach:
We use it to create PDF versions of packing lists, which can be downloaded with the green button "Packliste als PDF herunterladen".
(No, this is not built with NiceGUI, but with FastAPI and Angular.)

[thetableman]

It's not perfect but something like this, which I've been experimenting with, might be suitable.

from nicegui import ui

ui.add_head_html('''<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>''')

async def generate_pdf():
    result = await ui.run_javascript(r"""html2pdf().from(document.getElementById('""" + f'c{printable_content.id}' + r"""')).save();""", timeout=10)

ui.button('Create PDF', on_click=generate_pdf)
with ui.row() as printable_content:
    # Everything nested here will be included in the PDF
    ui.label('Hello NiceGUI!')
    
ui.run()

[frankvp11]

I've tried this too, but it didn't capture everything because I have a very complex UI.
Are there other ways to do this?

[rodja]

I sometimes use the "Go Full Page" Chrome Plugin: https://gofullpage.com/