如何在Voila生成的HTML报告中整合Itables与ipywidgets

步骤1：确认依赖安装 #

确保已安装所有必要模块：

pip install itables ipywidgets voila

步骤2：配置Itables适配Voila环境 #

Itables依赖DataTables的CDN资源，而Voila默认限制外部资源加载，因此需要在Notebook开头添加配置，允许加载外部脚本：

from itables import init_notebook_mode

# 启用交互式表格并允许加载CDN资源，适配Voila
init_notebook_mode(all_interactive=True, connected=True)

步骤3：编写整合代码 #

在Notebook中正常编写Itables表格和ipywidgets图表的代码即可，示例如下：

Itables交互式表格代码

import pandas as pd
from itables import show

# 生成示例数据并展示交互式表格
df = pd.DataFrame({
    "序号": [1, 2, 3, 4],
    "数值A": [12, 34, 56, 78],
    "数值B": [87, 65, 43, 21]
})
show(df)

ipywidgets交互式图表代码

import ipywidgets as widgets
import matplotlib.pyplot as plt
import numpy as np

# 生成带交互控件的图表
x = np.linspace(0, 10, 200)
@widgets.interact(频率=(1, 5, 0.5), 振幅=(0.5, 2, 0.1))
def draw_plot(频率=2, 振幅=1):
    y =振幅 * np.sin(频率 * x)
    plt.figure(figsize=(8, 4))
    plt.plot(x, y)
    plt.title("正弦波交互演示")
    plt.show()

步骤4：用Voila导出HTML #

有两种便捷方式导出：

• 命令行方式：在终端执行以下命令，直接将Notebook导出为HTML：

  voila --enable_nbextensions=True your_notebook.ipynb --export-html integrated_report.html
  

  参数说明：

  • --enable_nbextensions=True：确保加载ipywidgets和Itables所需的扩展
  • --export-html：指定导出的HTML文件名

• Jupyter界面操作：如果使用Jupyter Notebook界面，点击顶部菜单栏的「Voila」按钮（需提前启用Voila的Notebook扩展）打开预览页面，在预览页面右上角点击「Export」按钮，选择导出为HTML即可。

注意事项 #

• 若Itables表格在导出的HTML中无法交互，检查是否设置了connected=True，该参数是Voila环境下加载DataTables资源的关键。
• 确保Notebook中所有代码块单独运行正常，整合后不会出现依赖冲突或语法错误。

内容的提问来源于stack exchange，提问作者Marc S.