PyWebIO离线环境下加载Plotly和AG-Grid JS文件的解决方案

背景介绍

在使用PyWebIO开发Web应用时，经常会用到数据可视化库Plotly和数据表格组件AG-Grid。默认情况下，这些组件会从CDN加载所需的JavaScript文件。然而，在某些特殊环境下（如内网、离线环境），这种依赖外部CDN的方式会导致组件无法正常显示。

问题分析

PyWebIO内部使用RequireJS来管理JavaScript模块的加载。当应用运行在离线环境时，由于无法访问CDN上的Plotly和AG-Grid JS文件，会导致以下问题：

1. Plotly图表无法渲染
2. 数据表格功能无法使用
3. 应用界面显示异常

解决方案

核心思路

通过修改RequireJS的配置，将原本从CDN加载的JS文件改为从本地服务器加载。具体步骤如下：

1. 下载所需的JS文件到本地
2. 将这些文件放置在静态资源目录中
3. 在PyWebIO应用中重新配置RequireJS的路径

具体实现

1. 准备静态资源文件：

   • 下载Plotly的JS文件
   • 下载AG-Grid社区版和企业版的JS文件
   • 将这些文件保存在项目目录下的static文件夹中

2. 配置RequireJS路径： 在PyWebIO应用中，通过session.run_js()方法重新配置RequireJS的路径映射：

pywebio.session.run_js("""
require.config({
    paths: {
        'plotly': "static/plotly.min",
        "ag-grid": "static/ag-grid-community.min",
        "ag-grid-enterprise": "static/ag-grid-enterprise.min",
    },
});
""")

3. 启动应用时指定静态目录： 在启动PyWebIO服务器时，需要指定静态资源目录：

pywebio.start_server(main, port=8080, static_dir='./static', cdn=False)

完整示例代码

import json
import urllib.request
import plotly.express as px
import pywebio
from pywebio.output import put_html, put_datatable

def main():
    # 重新配置RequireJS路径
    pywebio.session.run_js("""
    require.config({
        paths: {
            'plotly': "static/plotly.min",
            "ag-grid": "static/ag-grid-community.min",
            "ag-grid-enterprise": "static/ag-grid-enterprise.min",
        },
    });
    """)

    # 使用Plotly绘制图表
    df = px.data.gapminder().query("country=='Canada'")
    fig = px.line(df, x="year", y="lifeExp", title='加拿大预期寿命')
    html = fig.to_html(include_plotlyjs="require", full_html=False)
    put_html(html)

    # 使用AG-Grid显示数据表格
    with urllib.request.urlopen('https://fakerapi.it/api/v1/persons?_quantity=30') as f:
        data = json.load(f)['data']
    put_datatable(data)

if __name__ == '__main__':
    pywebio.start_server(main, port=8080, static_dir='./static', cdn=False)

注意事项

1. 确保所有需要的JS文件都已正确下载并放置在静态资源目录中
2. 文件版本需要与PyWebIO内部使用的版本保持一致
3. 在离线环境中启动服务器时，必须设置cdn=False参数
4. 静态资源目录的路径需要根据实际项目结构调整

扩展应用

这种方法不仅适用于Plotly和AG-Grid，也可以用于其他通过CDN加载的JavaScript库。只需按照相同的模式：

1. 下载JS文件到本地
2. 在RequireJS配置中添加对应的路径映射
3. 确保文件能够通过静态资源服务器访问

通过这种方式，可以大大增强PyWebIO应用在离线环境下的适应能力，满足各种特殊场景下的部署需求。