如何在HTML页面中显示txt文件内容-js教程-PHP中文网

如何在HTML页面中显示txt文件内容

心靈之曲

发布： 2025-10-02 16:34:01

原创

594人浏览过

如何在html页面中显示txt文件内容

本文介绍了如何使用Flask框架将txt文件的内容传递到HTML页面并进行显示。通过Python读取txt文件，并利用Flask的render_template函数将读取到的内容作为变量传递给HTML模板，最后在HTML中使用Jinja2模板引擎的语法将内容渲染到页面上。

要在HTML页面中显示txt文件的内容，可以使用Python的Flask框架来完成。Flask允许你将Python变量传递到HTML模板中，然后在HTML中进行渲染。以下是一个详细的步骤：

1. Python (Flask) 代码:

首先，需要一个Python脚本（例如 app.py）来读取txt文件并将内容传递给HTML模板。

立即学习“前端免费学习笔记（深入）”；

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    try:
        with open("costs.txt", "r") as file1:
            line = file1.readline()
    except FileNotFoundError:
        line = "File not found!"  # 处理文件不存在的情况
    return render_template('index.html', text_line=line)

if __name__ == '__main__':
    app.run(debug=True)

登录后复制

这段代码做了以下几件事：

导入了Flask库。
创建了一个Flask应用实例。
定义了一个路由 /，当用户访问网站根目录时，会执行 home() 函数。
在 home() 函数中，尝试打开 costs.txt 文件并读取第一行内容。
如果文件不存在，则设置 line 变量为 "File not found!"。
使用 render_template() 函数渲染 index.html 模板，并将读取到的内容作为变量 text_line 传递给模板。
最后，启动Flask应用。

注意事项：

确保 costs.txt 文件与 app.py 文件位于同一目录下，或者提供正确的文件路径。
使用 try...except 块来处理文件不存在的情况，避免程序崩溃。

2. HTML (Jinja2) 代码:

接下来，创建一个HTML文件（例如 index.html）来显示从Python传递过来的内容。

稿定在线PS

PS软件网页版

查看详情

<!DOCTYPE html>
<html>
<head>
    <title>Display Text File Content</title>
</head>
<body>
    <h1>My buggy editor</h1>

    <div class="spacer">
        <a href="/new" class="button">Make buggy</a>
        <a href="/buggy" class="button">Show buggy</a>
        <a href="/json" class="button">Get buggy JSON</a>
    </div>

    <p>
        Use this editor to specify a racing buggy. The editor saves it in its
        little database and generates JSON data for the buggy. This is the data you
        need to supply when you log into the
        <strong><a href="{{ server_url }}">race server</a></strong>
        and enter your buggy into the next race.
    </p>
    <p>
        Remember that if your data is not accepted by the race server, your buggy
        will be disqualified from that race... so make sure you program your editor
        correctly.
    </p>

    <p>
        Content from costs.txt: {{ text_line }}
    </p>
</body>
</html>

登录后复制

在这个HTML文件中，{{ text_line }} 是Jinja2模板引擎的语法，用于显示从Python传递过来的 text_line 变量的值。

3. 运行程序:

确保安装了Flask：