如何在Flask框架的HTML页面中展示保留原有缩进的JSON内容

解决方案 #

你当前的问题来自两个错误处理逻辑：一是手动处理JSON字符串丢失了缩进，二是HTML默认不会保留普通文本的空格和换行。按下面步骤修改即可：

步骤1：修改后端Python代码 #

不要将JSON读取为字典后再转字符串，两种更简单的方案选其一即可：

方案A：直接读取原始JSON文件内容（不需要修改JSON内容时优先选）

完全保留你原始JSON文件的所有格式：

with open('st.json', encoding='utf-8') as jsonfile:
    data = jsonfile.read()

return render_template("admin/dashboard.html", name=request.form.get("name"), data=data)

方案B：读取为字典后重新格式化输出（需要修改JSON内容时选）

用json.dumps的indent参数生成规范的带缩进JSON：

import json

with open('st.json', encoding='utf-8') as jsonfile:
    raw_data = json.load(jsonfile)
    # indent=4 表示用4个空格缩进，ensure_ascii=False避免中文乱码
    data = json.dumps(raw_data, indent=4, ensure_ascii=False)

return render_template("admin/dashboard.html", name=request.form.get("name"), data=data)

步骤2：修改HTML模板渲染逻辑 #

不要把JSON内容直接放在普通标签里，用HTML原生的<pre>标签包裹，它会自动保留所有空格、缩进、换行符，不需要你手动加<br>：

<pre><code>{{ data }}</code></pre>

注意这里不需要加|safe过滤器，Jinja2的自动转义会正常处理特殊字符，放在<pre>里可以正常显示，还能避免XSS风险。

内容的提问来源于stack exchange，提问作者HACHI