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

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

碧海醫心

发布： 2025-10-02 15:47:00

原创

819人浏览过

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

第一段引用上面的摘要：

本文介绍了如何使用Flask框架将txt文件的内容传递到HTML页面并进行显示。通过后端Python代码读取txt文件，并将其内容作为变量传递给前端HTML模板，最终在页面上呈现。本文提供详细的步骤和示例代码，帮助开发者轻松实现这一功能。

要在一个HTML页面中显示txt文件的内容，可以使用Flask框架来实现。Flask允许你将Python变量传递到HTML模板中，从而动态生成HTML内容。以下是详细步骤：

1. Python (Flask) 后端代码：

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

首先，需要在Python Flask应用中读取txt文件，并将内容传递给HTML模板。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    try:
        with open("costs.txt", "r") as file:
            content = file.read() # 读取整个文件内容
    except FileNotFoundError:
        content = "costs.txt 文件未找到"
    except Exception as e:
        content = f"读取文件时发生错误: {e}"

    return render_template('index.html', text_content=content)

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

登录后复制

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

导入必要的Flask模块。
创建一个Flask应用实例。
定义一个路由 /，当用户访问根URL时，执行 home() 函数。
在 home() 函数中，尝试打开 costs.txt 文件并读取其内容。如果文件不存在或读取时发生错误，则设置 content 变量为相应的错误信息。
使用 render_template() 函数渲染 index.html 模板，并将读取到的文件内容作为变量 text_content 传递给模板。
最后，运行Flask应用。debug=True 使得在开发过程中可以方便地查看错误信息。

注意事项：

确保 costs.txt 文件位于与 app.py 文件相同的目录下，或者提供正确的文件路径。
使用 with open(...) 语句可以确保文件在使用完毕后自动关闭，避免资源泄漏。
添加了异常处理，以应对文件未找到或读取文件时发生错误的情况。

2. HTML (Jinja2) 前端代码：

稿定在线PS

PS软件网页版

查看详情

接下来，在HTML模板中使用Jinja2语法来显示传递过来的txt文件内容。

<!DOCTYPE html>
<html>
<head>
    <title>显示文本文件内容</title>
</head>
<body>
    <h1>文本文件内容:</h1>
    <p>{{ text_content }}</p>
</body>
</html>

登录后复制

这段代码非常简单：

创建一个基本的HTML结构。
使用 {{ text_content }} 将从Python后端传递过来的 text_content 变量插入到页面中。

3. 完整示例：

假设 costs.txt 文件内容如下：

This is the content of costs.txt.
It has multiple lines.
And some special characters.

登录后复制

运行上面的Python代码，并在浏览器中访问 http://127.0.0.1:5000/ (或Flask应用运行的地址)，你将看到 costs.txt 文件的内容显示在页面上。

总结：

通过Flask框架，可以方便地将后端数据传递到前端HTML页面进行显示。这种方法不仅可以显示txt文件内容，还可以用于显示来自数据库或其他数据源的动态内容。记住在Python代码中读取文件并将其传递给模板，然后在HTML模板中使用Jinja2语法显示数据。确保正确处理文件读取过程中的异常，以提高应用程序的健壮性。

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