how to display ipython HTML widget as a button

Question

I'm working in Jupyter notebook with Python. In my code I'm doing some operations to create a pandas DataFrame, displaying it and finally save it as a csv file. I'm now trying to allow the user to download it by clicking a button created after the displaying of the table. In the notebook it was working by using Download() from hublib.ui package but once I move to voila the button does nothing. At this point I changed and I'm using the HTML widget from ipywidgets. It is working but it is seen as a clickable text. I would like to know if there is a way to have it displayed as a button instead of a plain text.

Here's the part of the code that take care of the download:

self.csv_file = self.df.to_csv("table.csv",index=False)
htmlWidget = widgets.HTML(value="")
self.create_download_link("table.csv", htmlWidget)
display(htmlWidget)


def create_download_link(self, filename, htmlWidget):  
        title="Click here to download the table in csv format"
        
        data = open(filename, "rb").read()
        b64 = base64.b64encode(data)
        payload = b64.decode()
        
        html = '<a download="{filename}" href="data:text/csv;base64,{payload}" target="_blank">{title}</a>'
        htmlWidget.value = html.format(payload=payload,title=title,filename=filename)

Thank you for the help.

Answer 1

Just add a HTML button inside your <a></a>

def create_download_link(self, filename, htmlWidget):  
    title="Click here to download the table in csv format"

    data = open(filename, "rb").read()
    b64 = base64.b64encode(data)
    payload = b64.decode()

    html = '''
    <a download="{filename}" href="data:text/csv;base64,{payload}" target="_blank">
    <button>{title}</button>
    </a>'
    '''
    htmlWidget.value = html.format(payload=payload,title=title,filename=filename)

Result: