如何在 Flask 网页中正确实现 Python 生成数据的缩进显示-html教程-PHP中文网

html 默认忽略连续空格和首行缩进，导致 python 字符串中的空格无法在网页中正常显示；需将空格替换为实体或使用 css/html 容器保留格式。

html 默认忽略连续空格和首行缩进，导致 python 字符串中的空格无法在网页中正常显示；需将空格替换为实体或使用 css/html 容器保留格式。

在 Flask 应用中动态生成带缩进的结构化文本（如树形 XML 解析结果）时，一个常见误区是：直接在 Python 字符串中使用空格（如 ' '）拼接缩进，然后通过 Jinja2 模板渲染到 HTML 列表中。然而，HTML 渲染引擎会将多个连续普通空格（' '）合并为单个空格，并忽略行首缩进——这正是你看到“Searching for”与后续内容全部左对齐、缩进完全丢失的根本原因。

✅ 正确解决方案：用替代普通空格

HTML 中唯一能可靠表示“不可折叠空格”的是非断空格实体。因此，应将原代码中：

theSpace = '       '  # ❌ 7个普通空格 → 浏览器丢弃缩进

替换为：

theSpace = ' ' * 7  # ✅ 7个   → 浏览器严格保留

同时，为确保 Jinja2 不对进行 HTML 转义（否则会显示为字面量），需在模板中使用 |safe 过滤器：

<!-- my-form.html -->
<ol>
  {% for item in result %}
    <li>{{ item | safe }}</li>
  {% endfor %}
</ol>

? 完整修正后的 Python 逻辑（关键部分）

import os
import glob
import xml.etree.ElementTree as ET

temp_storage = {}
list_output = []

def printingData(Unit, increaseSpaceLength, source="."):
    theSpace = ' ' * 7  # ✅ 使用   实现可渲染缩进
    spaceLength = theSpace * increaseSpaceLength
    list_output.append(f"{spaceLength}Searching for {Unit}:\n")

    for path in glob.glob(os.path.join(source, "x*.xml")):
        theDocument = temp_storage.setdefault(path, ET.parse(path).getroot())
        if theDocument.get("ID") == Unit:
            theSpot = theDocument.findall('.//xTest[@Type="Unit"]')
            if len(theSpot) == 0:
                list_output.append(f'{spaceLength}No sub Units found for {Unit}\n')
            else:
                increaseSpaceLength += 1
                spaceLength = theSpace * increaseSpaceLength
                for unit_element in theSpot:
                    unit_id = unit_element.get("Unit", "")
                    location = unit_element.get("Name", "")
                    if unit_id:
                        list_output.append(f'{spaceLength}Child Unit ID: {unit_id}\n')
                        list_output.append(f'{spaceLength}Unit Location: {location}\n')
                        printingData(unit_id, increaseSpaceLength + 1, source=source)
    return list_output

? 注意：list_output 是模块级全局列表，多次调用会导致累积残留。建议改为局部列表并返回（见下方优化示例）。

⚙️ 进阶建议：更健壮的实现方式

避免全局状态：重写函数，返回新列表而非追加到全局 list_output：

def printingData(Unit, increaseSpaceLength=0, source="."):
    theSpace = ' ' * 7
    spaceLength = theSpace * increaseSpaceLength
    result = [f"{spaceLength}Searching for {Unit}:\n"]
    # ... 其余逻辑保持不变，所有 append 改为 result.append(...)
    return result  # ✅ 返回新列表，无副作用

替代方案（推荐用于复杂结构）：改用

 标签 + <code> 包裹，配合 white-space: pre CSS，天然保留所有空白符：<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"><code>{% for item in result %}{{ item | safe }}{% endfor %}</code>

此时 Python 中仍可用普通空格，语义更清晰，且利于后续添加语法高亮。

✅ 总结

问题根源	解决方案	关键操作
HTML 折叠空白符	使用实体	theSpace = ' ' * N
Jinja2 自动转义	添加 \|safe 过滤器	{{ item \\| safe }}
全局变量污染	改为纯函数式返回	避免 list_output.append()，改用局部列表 result