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

在 HTML 页面中显示 TXT 文件内容

聖光之護

发布： 2025-10-02 15:54:12

原创

256人浏览过

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

第一段引用上面的摘要：

本文档将指导您如何使用 Flask 框架在 HTML 页面中显示 TXT 文件的内容。我们将演示如何从 Python 后端读取文件内容，并将其传递到 HTML 模板中，最终在网页上呈现出来。通过学习本文，您将掌握 Flask 框架中数据传递的基本方法，并能灵活应用于其他类似场景。

步骤详解：

Python 后端 (app.py):

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

首先，在 Python 后端代码中，你需要读取 TXT 文件的内容。这里我们使用 open() 函数打开文件，并使用 readline() 方法读取文件的第一行。当然，你也可以使用 readlines() 读取所有行，或者使用其他更复杂的方式来处理文件内容。
```
from flask import Flask, render_template

app = Flask(__name__)

# 读取 TXT 文件内容
try:
    with open("costs.txt", "r") as file1:
        line = file1.readline()
except FileNotFoundError:
    line = "File not found: costs.txt"  # 处理文件不存在的情况

@app.route('/')
def home():
    return render_template('index.html', Line=line)

if __name__ == '__main__':
    app.run(debug=True)
```
登录后复制
代码解释：
- with open("costs.txt", "r") as file1:: 使用 with 语句打开文件，确保文件在使用完毕后自动关闭，避免资源泄漏。 "r" 表示以只读模式打开文件。
- line = file1.readline(): 读取文件的第一行并将其赋值给变量 line。
- except FileNotFoundError:: 处理 costs.txt 文件不存在的情况，避免程序崩溃。
- return render_template('index.html', Line=line): 将变量 line 传递给 index.html 模板。Line 是一个变量名，可以在 HTML 模板中使用。

HTML 前端 (index.html):

稿定在线PS

PS软件网页版

查看详情

接下来，在 HTML 模板中，你需要使用 Flask 的模板引擎 (Jinja2) 来显示从 Python 后端传递过来的数据。使用双大括号 {{ ... }} 将变量包裹起来，即可在 HTML 页面中显示其值。

<!DOCTYPE html>
<html>
<head>
    <title>Displaying TXT 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>

    <h2>TXT File Content:</h2>
    <p>{{ Line }}</p>  <!-- 显示 TXT 文件内容 -->
</body>
</html>

登录后复制

代码解释：

{{ Line }}: Jinja2 模板语法，用于显示从 Python 后端传递过来的 Line 变量的值。

运行程序:

确保 costs.txt 文件与 app.py 在同一目录下，然后运行 app.py。在浏览器中访问 http://127.0.0.1:5000/ (或者 Flask 启动时显示的地址)，你就可以看到 costs.txt 文件的第一行内容显示在网页上了。

注意事项:

文件路径: 确保 open() 函数中指定的文件路径是正确的。如果文件不在当前目录下，需要提供完整的文件路径。
编码问题: 如果 TXT 文件使用特定的编码格式（例如 UTF-8），需要在 open() 函数中指定编码方式。例如：open("costs.txt", "r", encoding="utf-8")。
安全性: 如果 TXT 文件内容来自用户输入，需要进行适当的过滤和转义，以防止跨站脚本攻击 (XSS)。

总结:

通过以上步骤，你已经成功地将 TXT 文件的内容显示在了 HTML 页面上。这个过程涉及了 Python 后端的文件读取和数据传递，以及 HTML 前端的模板渲染。掌握了这些基本技巧，你就可以灵活地处理各种数据展示的需求。记住，根据实际情况调整文件读取方式、数据处理逻辑和 HTML 模板，以满足你的具体需求。

以上就是在 HTML 页面中显示 TXT 文件内容的详细内容，更多请关注php中文网其它相关文章！