在 Google Colab 平台上的 Jupyter Notebook 中显示/渲染 HTML 文件

Posted 2023-03-16

【中文标题】在 Google Colab 平台上的 Jupyter Notebook 中显示/渲染 HTML 文件

【英文标题】：Display / Render an HTML file inside Jupyter Notebook on Google Colab platform

【发布时间】：2019-01-05 16:31:03

【问题描述】：

我正在使用 Google Colab 使用 Python 3.0 创建地图，并且我已经使用 Basemaps 完成了这项工作。我接下来尝试使用谷歌地图创建类似的地图。我找到了两个 python 包，即 gmaps 和 gmplot。似乎 gmaps 需要谷歌 API，但 gmplot 不需要，因此我使用的是 gmplot。

使用 gmplot，我可以创建一个文件“my_map.html”，如果我将其下载到本地桌面，我可以在浏览器中打开并正确查看地图。

但是，我想在笔记本输出单元格中查看地图，而无需下载到本地计算机。下图是我尝试过的截图……没有错误，但也没有显示。

是否有一些像 %matplotlib inline 这样的命令需要执行才能在输出单元格中显示文件的内容？还是有更好的解决方案

【问题讨论】：

我建议查看浏览器的控制台输出，因为这个功能对我来说很好用。您甚至可以通过编写和显示您自己的 html 文件来测试它。

【参考方案1】：

尝试文件的完整路径：/content/my_map.html

代码应该是：

import IPython
IPython.display.HTML(filename='/path/to/your/filename')

【参考方案2】：

如果 html 包含位于 colab 或您的（映射的）google-drive 中的图像，则此解决方案不适用于我：

IPython.display.HTML('<img src="/content/elmo_1.jpg">') # can't find image 
IPython.display.HTML('<img src="/content/gdrive/My Drive/elmo_1.jpg">') # can't find image  
IPython.display.HTML('<img src="/content/gdrive/My%20Drive/elmo_1.jpg">') # can't find image  

不过，它适用于标准网址：

IPython.display.HTML('<img src="https://github.com/blablabla/elmo_1.jpg?raw=1">') 

【参考方案3】：

请尝试以下代码：

from IPython.display import IFrame
IFrame(src='path/to/your/filename.html', width=900, height=600)

它确实对我有用。 :)

【讨论】：

欢迎来到 Stack Overflow！您的答案似乎没有比其他答案添加更多内容。唯一的区别是明确的尺寸规格，它似乎与问题无关。您可以在帖子中添加一些解释或更多内容以改进它吗？不添加任何内容的新答案往往会被否决或删除。

iframe 与仅显示 html 不同。当然，您可能可以从常规 html 访问 iframe，但这是与其他选项不同的方法。