nbconvert转换Tab组件内HTML表格渲染异常问题咨询

问题说明 #

使用nbconvert工具将Jupyter Notebook转换为HTML文件时，页面顶部的HTML表格可正常渲染，但置于widgets.Tab组件内的HTML表格无法正确显示。

测试代码 #

from IPython.display import HTML, Markdown, display
import ipywidgets as widgets

table = "<table><tr><th>Sample</th></tr><tr><td>Text</td></tr></table>"

display(Markdown("# Name"))
display(HTML(table))

tabs = []

tab = widgets.Output()
with tab:
    display(Markdown("# Name1"))
    display(HTML(table))
    tabs.append(tab)

tab2 = widgets.Output()
with tab2:
    display(Markdown("# Name2"))
    display(HTML(table))
    tabs.append(tab2)

all_tabs = widgets.Tab(children=tabs)
for i, name in enumerate(["1", "2"]):
    all_tabs.set_title(i, name)
display(all_tabs)

转换命令 #

jupyter nbconvert --execute sample.ipynb --TemplateExporter.exclude_input=True --output-dir=C:\Users\sample\Downloads\ --to html --output sample.html

环境依赖 #

核心依赖包 #

• GitPython
• matplotlib
• numpy
• pandas
• pyquaternion
• scipy
• jupyter

详细版本列表 #

anyio                    3.6.2
argon2-cffi              21.3.0
argon2-cffi-bindings     21.2.0
arrow                    1.2.3
asttokens                2.2.1
attrs                    22.2.0
backcall                 0.2.0
beautifulsoup4           4.11.2
bleach                   6.0.0
build                    0.10.0
cffi                     1.15.1
click                    8.1.3
colorama                 0.4.6
comm                     0.1.2
contourpy                1.0.7
cycler                   0.11.0
debugpy                  1.6.6
decorator                5.1.1
defusedxml               0.7.1
executing                1.2.0
fastjsonschema           2.16.2
fonttools                4.38.0
fqdn                     1.5.1
gitdb                    4.0.10
GitPython                3.1.31
idna                     3.4
ipykernel                6.21.2
ipython                  8.10.0
ipython-genutils         0.2.0
ipywidgets               8.0.4
isoduration              20.11.0
jedi                     0.18.2
Jinja2                   3.1.2
jsonpointer              2.3
jsonschema               4.17.3
jupyter_client           8.0.3
jupyter-console          6.6.1
jupyter_core             5.2.0
jupyter-events           0.6.3
jupyter_server           2.3.0
jupyter_server_terminals 0.4.4
jupyterlab-pygments      0.2.2
jupyterlab-widgets       3.0.5
kiwisolver               1.4.4
MarkupSafe               2.1.2
matplotlib               3.7.0
matplotlib-inline        0.1.6
mistune                  2.0.5
nbclassic                0.5.2
nbclient                 0.7.2
nbconvert                7.2.9
nbformat                 5.7.3
nest-asyncio             1.5.6
notebook                 6.5.2
notebook_shim            0.2.2
numpy                    1.24.2
packaging                23.0
pandas                   1.5.3
pandocfilters            1.5.0
parso                    0.8.3
pickleshare              0.7.5
Pillow                   9.4.0
pip                      22.3.1
pip-tools                6.12.2
platformdirs             3.0.0
prometheus-client        0.16.0
prompt-toolkit           3.0.37
psutil                   5.9.4
pure-eval                0.2.2
pycparser                2.21
Pygments                 2.14.0
pyparsing                3.0.9
pyproject_hooks          1.0.0
pyquaternion             0.9.9
pyrsistent               0.19.3
python-dateutil          2.8.2
python-json-logger       2.0.7
pytz                     2022.7.1
pywin32                  305
pywinpty                 2.0.10
PyYAML                   6.0
pyzmq                    25.0.0
qtconsole                5.4.0
QtPy                     2.3.0
rfc3339-validator        0.1.4
rfc3986-validator        0.1.1
scipy                    1.10.1
Send2Trash               1.8.0
setuptools               65.5.0
six                      1.16.0
smmap                    5.0.0
sniffio                  1.3.0
soupsieve                2.4
stack-data               0.6.2
terminado                0.17.1
tinycss2                 1.2.1
tomli                    2.0.1
tornado                  6.2
traitlets                5.9.0
uri-template             1.2.0
wcwidth                  0.2.6
webcolors                1.12
webencodings             0.5.1
websocket-client         1.5.1
wheel                    0.38.4
widgetsnbextension       4.0.5

问题原因与解决办法 #

这不是用户操作失误，属于nbconvert处理ipywidgets动态组件时的已知限制：nbconvert执行Notebook后，widgets.Output容器内的HTML内容不会被静态渲染，而是保留为动态widget的状态，静态HTML无法解析并展示这些交互组件内的内容。

解决方式1：使用ipywidgets嵌入功能 #

通过ipywidgets.embed模块将widget内容转换为可嵌入的静态HTML，确保组件内的内容能正常渲染：

from IPython.display import HTML, Markdown, display
import ipywidgets as widgets
from ipywidgets import embed

table = "<table><tr><th>Sample</th></tr><tr><td>Text</td></tr></table>"

display(Markdown("# Name"))
display(HTML(table))

tabs = []

tab = widgets.Output()
with tab:
    display(Markdown("# Name1"))
    display(HTML(table))
tabs.append(tab)

tab2 = widgets.Output()
with tab2:
    display(Markdown("# Name2"))
    display(HTML(table))
tabs.append(tab2)

all_tabs = widgets.Tab(children=tabs)
for i, name in enumerate(["1", "2"]):
    all_tabs.set_title(i, name)
display(all_tabs)

# 生成包含widget的独立HTML文件
embed.minimal_html('widgets_output.html', views=[all_tabs], title='Tab Widgets with Table')

运行代码后会生成widgets_output.html，打开该文件即可看到Tab组件内的表格正常渲染。

解决方式2：使用静态HTML标签替代动态Tab组件 #

如果不需要交互功能，可使用HTML原生的<details>/<summary>标签实现类Tab的折叠效果，这样nbconvert能直接渲染其中的表格：

from IPython.display import HTML, Markdown, display

table = "<table><tr><th>Sample</th></tr><tr><td>Text</td></tr></table>"

display(Markdown("# Name"))
display(HTML(table))

# 静态折叠面板实现类Tab效果
static_tab_html = """
<details style="margin:10px 0;">
  <summary style="cursor:pointer;font-size:1.2em;font-weight:bold;">1</summary>
  <h1>Name1</h1>
  {table_content}
</details>
<details style="margin:10px 0;">
  <summary style="cursor:pointer;font-size:1.2em;font-weight:bold;">2</summary>
  <h1>Name2</h1>
  {table_content}
</details>
""".format(table_content=table)

display(HTML(static_tab_html))

用原转换命令处理修改后的Notebook，生成的HTML中折叠面板展开后即可看到正常渲染的表格。

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