pythonhtmlcssjupyter-notebookvoila

how to display ipython HTML widget as a button


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.


Solution

  • 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: HTML Button Image that says "Click Here to download the table in csv format"