如何将IPython HTML组件显示为下载按钮（适配Voila环境）

在Jupyter Notebook中基于Python开发，生成pandas DataFrame后，需要展示数据并将其保存为CSV文件。原本使用hublib.ui的Download()组件实现下载按钮，在Jupyter Notebook中可正常使用，但切换到Voila环境后该按钮失效。目前改用ipywidgets的HTML组件实现下载功能，功能正常但仅显示为可点击文本，希望将其改为按钮样式。现有代码片段如下：

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)

通过给HTML中的<a>标签添加内联CSS样式或者Bootstrap按钮类，就能让可点击文本变成按钮样式，Voila环境原生支持这些样式。

修改后的代码 #

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="Download CSV"
        
        data = open(filename, "rb").read()
        b64 = base64.b64encode(data)
        payload = b64.decode()
        
        # 方式1：使用内联CSS自定义按钮样式
        html = '<a download="{filename}" href="data:text/csv;base64,{payload}" target="_blank" style="padding: 8px 16px; background-color: #007bff; color: white; border-radius: 4px; text-decoration: none; cursor: pointer;">{title}</a>'
        
        # 方式2：使用Bootstrap按钮类（Voila默认集成Bootstrap，推荐）
        # html = '<a download="{filename}" href="data:text/csv;base64,{payload}" target="_blank" class="btn btn-primary">{title}</a>'
        
        htmlWidget.value = html.format(payload=payload,title=title,filename=filename)

说明 #

• 方式1：通过style属性直接定义按钮的内边距、背景色、文字色、圆角等样式，可完全自定义外观。
• 方式2：利用Voila默认集成的Bootstrap样式，btn btn-primary类会生成标准的蓝色主按钮，样式统一且无需手写大量CSS。

内容的提问来源于stack exchange，提问作者Andrea