导出含IPython.display.HTML的ipywidgets交互式HTML页面问题

1. 替换IPython.core.display.HTML为ipywidgets.HTML组件 #

问题根源在于Output组件中动态display()的IPython.core.display.HTML对象无法被ipywidgets的前端渲染引擎正确捕获并在导出后保留交互更新能力。需将预生成的HTML内容提取为字符串，直接使用ipywidgets.HTML组件承载内容，而非通过Output展示：

修改后的核心代码：

from ipywidgets import AppLayout, HTML, Layout, Dropdown, Button, VBox
from IPython.display import display

widget_1 = Dropdown(
    options=[1,2,3,4],
    description='1:'
)
widget_2 = Dropdown(
    options=["A","B","C","D"],
    description='2:'
)

# 用ipywidgets.HTML组件替代Output，初始加载选中内容对应的HTML字符串
html_display = HTML(value=df.loc[widget_1.value, widget_2.value].HTML().data)

button = Button(description='Display')

def on_button_clicked(b):    
    # 直接更新HTML组件的value属性，传入目标HTML字符串
    html_display.value = df.loc[widget_1.value, widget_2.value].HTML().data
    
button.on_click(on_button_clicked)

app=AppLayout(
    left_sidebar=VBox([
        widget_1,
        widget_2,
        button
    ]),
    center=html_display
)

app

2. 使用ipywidgets.embed.embed_minimal_html导出静态交互HTML #

修改代码后，使用embed_minimal_html导出时，所有交互组件的状态和回调会被正确序列化为JavaScript，生成可直接打开的静态交互页面：

from ipywidgets.embed import embed_minimal_html

# 导出静态交互HTML文件
embed_minimal_html('interactive_report.html', views=[app], title='Interactive HTML Report')

3. Voila渲染验证（可选） #

修改后的代码也能在Voila中正常工作，因为ipywidgets.HTML的属性变更会被Voila的前端引擎正确监听，启动Voila服务打开Notebook即可看到可更新的交互效果。

原理说明 #

• IPython.core.display.HTML是Notebook中用于一次性渲染HTML的对象，动态display()到Output组件时，导出的静态HTML无法保留其动态更新的回调关联
• ipywidgets.HTML是ipywidgets原生组件，其value属性的变更会被前端主动监听，导出时交互逻辑会被打包到HTML中，从而在静态页面中保留完整的交互能力

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