Download widget?

Widgets
4

Yes, and on that page there is an example here that agoose says works in voila and I just tested a variation of it.

Here is my set-up preparing for the demo.
I clicked here to open a session (happened to be based on this repo here, but that isn’t really important as it didn’t use the method they tried in the notebook there). Then when the session came up I used JupyterLab’s file navigator to duplicate voilademo.py and renamed it to voilademo.txt.

Here is my code that I put in a new notebook, and then hit the voila icon in the upper right side to try it in Voila:

# based on https://github.com/voila-dashboards/voila/issues/711#issuecomment-695872958
from ipywidgets import Output, Button
from IPython.display import HTML, clear_output
from base64 import b64encode

download_output = Output()
display(download_output)
def trigger_download(text, filename, kind='text/json'):
    # see https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs for details
    content_b64 = b64encode(text.encode()).decode()
    data_url = f'data:{kind};charset=utf-8;base64,{content_b64}'
    js_code = f"""
        var a = document.createElement('a');
        a.setAttribute('download', '{filename}');
        a.setAttribute('href', '{data_url}');
        a.click()
    """
    with download_output:
        clear_output()
        display(HTML(f'<script>{js_code}</script>'))

btn = Button(description='download a text file')
file = open("voilademo.txt", "r")
s = file.read()
def download_text(e=None):
    trigger_download(s, 'voilademo.txt', kind='text/plain')
btn.on_click(download_text)
display(btn)

It worked and downloaded the contents of voilademo.txt while running in Voila.

Hopefullly, if you follow it step-by-step the demo will work for you and you can adapt the code to your situation.

Minor aside:
Please don’t share an old video that’s already in the linked issue and isn’t your issue as you aren’t running on that machine with those versions. (Or at least make it clear you are quoting something else. You can use markdown to make quote sections.) Plus, that video doesn’t share any useable code. The code with it would have made it potentially more useful for others to build on and test.

1 Like