How to display local html file content as a html page?

Using Streamlit
1

I have a html file named as “plot.html” in same directory with my streamlit program.
plot.html file content:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>PyG2Plot</title>
    <script type="text/javascript" src="https://unpkg.com/@antv/g2plot@2"></script>
</head>
<body>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html, body, div.pyg2plot-plot-container { 
      height: 100%;
      overflow: hidden;
    }
  </style>

  <div id="a5961f18d7644f7a9bc8de5aeb3c43cd" class="pyg2plot-plot-container"></div>

  <script>
    var plot_a5961f18d7644f7a9bc8de5aeb3c43cd = new G2Plot.Line("a5961f18d7644f7a9bc8de5aeb3c43cd", {
  "data": [
    {
      "year": "1991",
      "value": 3
    },
    {
      "year": "1992",
      "value": 4
    },
    {
      "year": "1993",
      "value": 3.5
    },
    {
      "year": "1994",
      "value": 5
    },
    {
      "year": "1995",
      "value": 4.9
    },
    {
      "year": "1996",
      "value": 6
    },
    {
      "year": "1997",
      "value": 7
    },
    {
      "year": "1998",
      "value": 9
    },
    {
      "year": "1999",
      "value": 13
    }
  ],
  "xField": "year",
  "yField": "value"
}); 
    plot_a5961f18d7644f7a9bc8de5aeb3c43cd.render();
  </script>
</body>
</html>

I want to load it and show it in streamlit program, is there have some method?

import os
from requests_html import HTMLSession
from requests_file import FileAdapter

session = HTMLSession()
session.mount('file://', FileAdapter())
pwd = os.getcwd().replace("\\","/")
html_obj = session.get(f'file:///{pwd}/plot.html')
st.write(type(html_obj.text))
st.write(html_obj.text)

this code can show text content of plot.html, how to render or load its content in streamlit page?
I tried this:

import streamlit.components.v1 as html
html.iframe("http://localhost:8501/plot.html")

this will report 404: Not Found error.

1 Like
2

Hi @BeyondMyself:

import streamlit as st
import streamlit.components.v1 as components
p = open("plot.html")
components.html(p.read())

image
image935×745 9.78 KB

Best,
Randy

4 Likes
3

Hi @BeyondMyself , @randyzwitch

I assume this also works in this situation (let me know if otherwise, or if it can be simplified further :slight_smile:).

plot_file = open('plot.html','r')

plot = plot_file.read()

st.markdown(plot,unsafe_allow_html=True)

plot = plot_file.close()
4 Likes
4

Yes, this is a good point, I was a bit lazy closing my file handles. But otherwise, the general idea stands.

2 Likes
5

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.