QWebEngineView无法渲染pydeck生成的HTML页面问题求助

问题根源 #

1. 语法错误Unexpected token '='：pydeck生成的"@@=coordinates"这类绑定语法需要@deck.gl的库解析，但初始化代码在库加载完成前就执行了，导致JS引擎无法识别该语法。
2. createDeck is not defined：@deck.gl/jupyter-widget的CDN脚本未加载完成或加载失败，导致初始化时找不到该函数。

直接解决步骤 #

步骤1：延迟初始化代码执行 #

把HTML里的初始化代码放到DOMContentLoaded事件里，确保所有外部脚本加载完成后再运行：
修改HTML中的脚本部分：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('deck-container');
    const jsonInput = {
        // 原JSON配置内容不变
    };
    const tooltip = true;
    const customLibraries = null;
    const configuration = null;

    const deckInstance = createDeck({
        container,
        jsonInput,
        tooltip,
        customLibraries,
        configuration
    });
});
</script>

步骤2：给setHtml设置基准URL #

PyQt的setHtml如果不指定基准URL，外部CDN资源可能加载异常，添加基准URL：
修改Python代码：

from PyQt5.QtCore import QUrl

# ... 其他代码 ...
window.setHtml(data, QUrl("https://cdn.jsdelivr.net/"))

步骤3：可选：替换为pydeck独立脚本 #

如果jupyter-widget版本的脚本适配有问题，换成pydeck官方独立CDN脚本：
把HTML里的<script src='https://cdn.jsdelivr.net/npm/@deck.gl/jupyter-widget@~9.0.*/dist/index.js'></script>替换成：

<script src="https://unpkg.com/pydeck@0.8.0/dist.min.js"></script>

然后把初始化代码改成pydeck标准API调用：

const deckInstance = new pydeck.Deck({
    container: 'deck-container',
    initialViewState: jsonInput.initialViewState,
    layers: jsonInput.layers,
    mapStyle: jsonInput.mapStyle,
    tooltip: true
});

完整修改后的Python代码 #

import sys
from pathlib import Path
from PyQt5.QtWidgets import QApplication, QWebEngineView
from PyQt5.QtCore import QUrl

# 生成HTML并读取
r.to_html("test2.html")
data = Path("test2.html").read_text(encoding="utf8")

# 自动修改HTML，添加DOMContentLoaded包裹
modified_data = data.replace(
    "<script>",
    "<script>\ndocument.addEventListener('DOMContentLoaded', function() {"
).replace(
    "    });\n\n  </script>",
    "    });\n});\n  </script>"
)

# 初始化PyQt应用
app = QApplication(sys.argv + ["--no-sandbox"])
window = QWebEngineView()
# 设置HTML并指定基准URL
window.setHtml(modified_data, QUrl("https://cdn.jsdelivr.net/"))
window.resize(640, 480)
window.show()

sys.exit(app.exec_())

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