QWebEngineView无法加载在线vis库，PyVis图表在PyQt6中加载失败

用pyvis 0.3.2生成树形图HTML文件，在Edge、Chrome浏览器中可正常加载（仅控制台报vis-network源码映射404警告），但通过PyQt6的QWebEngineView加载时，出现以下错误：

js: Uncaught ReferenceError: vis is not defined.

复现代码 #

from pyvis.network import Network
import numpy as np
import os, sys
from PyQt6.QtCore import QUrl
from PyQt6.QtWidgets import QApplication, QWidget, QVBoxLayout
from PyQt6.QtWebEngineWidgets import QWebEngineView


# Example dataset
dataset = [["A", "B"], ["B", "C"]]
net = Network()

# Add nodes
nodes = list(set(np.concatenate(dataset)))
nodes_index = {}

for index, entry in enumerate(nodes):
    net.add_node(index, label=entry, shape="circle")
    nodes_index[entry] = index


# Add an edge with hover content
for entry in dataset:
    net.add_edge(
        nodes_index[entry[0]], nodes_index[entry[1]], title="Pi-Pi Occupancy = 10%"
    )

net.save_graph("tree_diagram.html")
path = os.sep.join([os.getcwd(), "tree_diagram.html"])
url = QUrl.fromLocalFile(path)


class WebView(QWidget):
    def __init__(self):
        super().__init__()
        self.window_layout = QVBoxLayout()
        self.setLayout(self.window_layout)
        self.web = QWebEngineView()
        self.window_layout.addWidget(self.web)
        self.web.load(url)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    page = WebView()
    page.show()
    sys.exit(app.exec())

核心问题分析 #

生成的HTML存在两个关键问题，同时QWebEngineView的默认策略也会限制资源加载：

1. 引用了本地不存在的相对路径脚本：<script src="lib/bindings/utils.js"></script>，会阻塞后续脚本执行
2. vis-network的CSS路径错误：https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css（dist/dist重复）
3. QWebEngineView默认禁止本地文件加载跨域资源，导致CDN上的vis-network脚本无法正常加载

方案1：修复HTML+配置QWebEngineView允许跨域 #

步骤1：修改生成的HTML #

打开tree_diagram.html，做以下修改：

• 删除<script src="lib/bindings/utils.js"></script>这一行
• 将vis-network的CSS路径中的dist/dist改为dist，修正后代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

步骤2：修改Python代码，配置跨域权限 #

新增导入并配置QWebEngineSettings，允许本地文件访问远程资源：

from PyQt6.QtWebEngineCore import QWebEngineSettings  # 新增导入

class WebView(QWidget):
    def __init__(self):
        super().__init__()
        self.window_layout = QVBoxLayout()
        self.setLayout(self.window_layout)
        self.web = QWebEngineView()
        # 启用本地文件加载远程资源
        settings = self.web.settings()
        settings.setAttribute(QWebEngineSettings.WebAttribute.LocalContentCanAccessRemoteUrls, True)
        self.window_layout.addWidget(self.web)
        self.web.load(url)

方案2：使用pyvis离线模式（推荐） #

pyvis支持离线生成，自动将依赖的JS/CSS下载到本地目录，彻底避免CDN依赖和跨域问题：
修改初始化Network的代码：

net = Network(offline=True)

生成HTML后，当前目录会自动创建visjs文件夹，包含所有本地依赖资源，QWebEngineView可直接加载，无需额外配置。

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