将 Dash 布局保存到 html

Question

我在破折号布局中绘制了一堆东西。我想将它们保存到 html 文件中，以便稍后查看。当我重新打开保存的 html 文件时，我首先看到了所有内容。但是，在 <1 秒内，页面变为空白，我收到错误消息：“加载布局错误”。（见下面的 gif）

如何解决这个问题？

谢谢！

Answer 1

Dash 应用程序 layout 被序列化为 JSON 并由 Dash 服务器（Flask 服务器的扩展）提供给前端。布局中包含的所有 Dash 组件都捆绑为 JS/CSS 个文件。这些包也由 Dash 服务器提供给前端。

没有服务器，没有人向前端发送JSON、JS、CSS bundle，所以什么也不会渲染。

我不确定为什么你可以短暂地看到你的应用程序。我的猜测是 Dash 会在您每次运行时保存您的应用程序的 PNG 图片。可以把它想象成在真正的响应式应用程序出现之前您看到的启动画面。

看看这个 high-level overview Dash 是如何工作的。

Answer 2

此解决方案未完全发挥作用：

您必须保存完整的网页。
为了防止 javascript 产生任何错误我已经删除了 bundle(2).js 文件。

此文件包含函数 dash_renderer，它会尝试与服务器交互并产生问题。

<footer>
<script id="_dash-config" type="application/json">{"url_base_pathname": "/", "requests_pathname_prefix": "/"}</script>
<script src="./Dash_files/react.min.js"></script>
<script src="./Dash_files/react-dom.min.js"></script>
<script src="./Dash_files/bundle.js"></script>
<script src="./Dash_files/plotly-1.38.0.min.js"></script>
<script src="./Dash_files/bundle(1).js"></script>
<!-- <script src="./Dash_files/bundle(2).js"> --></script>
</footer>

结果与您在 ~1 秒内看到的页面相同。

最大的缺点：plotly 的交互性丢失了。

将 Dash 布局保存到 html

Saving Dash layout to html

html

python

plotly

plotly-dash