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

**URL:** <https://discuss.streamlit.io/t/how-to-display-local-html-file-content-as-a-html-page/22598>\
**Category:** Using Streamlit\
**Created:** [February 28, 2022, 3:25pm UTC](https://discuss.streamlit.io/t/how-to-display-local-html-file-content-as-a-html-page/22598 "2022-02-28T15:25:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![BeyondMyself](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/beyondmyself/32/7525_2.png) [@BeyondMyself](https://discuss.streamlit.io/u/BeyondMyself)\
**Post date:** [February 28, 2022, 3:25pm UTC](https://discuss.streamlit.io/t/how-to-display-local-html-file-content-as-a-html-page/22598/1 "2022-02-28T15:25:42Z")

</div>

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

```auto
<!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?

```auto
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:

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

```

this will report 404: Not Found error.

---

<div class="post-metadata">

**Author:** ![randyzwitch](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/randyzwitch/32/58772_2.png) [@randyzwitch](https://discuss.streamlit.io/u/randyzwitch)\
**Post date:** [February 28, 2022, 3:44pm UTC](https://discuss.streamlit.io/t/how-to-display-local-html-file-content-as-a-html-page/22598/2 "2022-02-28T15:44:14Z")

</div>

Hi @BeyondMyself:

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

```

 ![image](https://global.discourse-cdn.com/streamlit/original/2X/8/84d6a1519897f304903f723aab73ff2309276ce9.png)

Best,  
Randy

---

<div class="post-metadata">

**Author:** ![marduk](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/marduk/32/11690_2.png) [@marduk](https://discuss.streamlit.io/u/marduk)\
**Post date:** [February 28, 2022, 4:00pm UTC](https://discuss.streamlit.io/t/how-to-display-local-html-file-content-as-a-html-page/22598/3 "2022-02-28T16:00:58Z")

</div>

Hi @BeyondMyself , @randyzwitch

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

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

plot = plot_file.read()

st.markdown(plot,unsafe_allow_html=True)

plot = plot_file.close()

```

---

<div class="post-metadata">

**Author:** ![randyzwitch](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/randyzwitch/32/58772_2.png) [@randyzwitch](https://discuss.streamlit.io/u/randyzwitch)\
**Post date:** [March 1, 2022, 1:43pm UTC](https://discuss.streamlit.io/t/how-to-display-local-html-file-content-as-a-html-page/22598/4 "2022-03-01T13:43:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/streamlit/original/3X/c/f/cf4c2ee0d938358f82448c5fe4b9c3c91d7ce19c.svg) [@system](https://discuss.streamlit.io/u/system)\
**Post date:** [March 1, 2023, 1:43pm UTC](https://discuss.streamlit.io/t/how-to-display-local-html-file-content-as-a-html-page/22598/5 "2023-03-01T13:43:33Z")

</div>

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