如何在Python Flask网页中实现数据的缩进显示？

浏览器会自动合并HTML中的连续空格、制表符和换行符，你Python代码中添加的多空格在渲染时会被压缩成单个空格，导致缩进效果消失。

以下是三种可行的修复方式，按需选择：

方法1：使用<pre>标签保留原始格式 #

这是最快捷的方式，直接让浏览器保留所有空格和换行：

1. 修改Python函数，返回拼接后的字符串而非列表：

temp_storage = {}

def printingData(Unit, increaseSpaceLength, source="."):
    output = ""
    theSpace = '       '
    spaceLength = theSpace * increaseSpaceLength
    output += 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:
                output += 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 != "":
                        output += f'{spaceLength}Child Unit ID:{unit_id}\n'
                        output += f'{spaceLength}Unit Location:{location}\n'
                        output += printingData(unit_id, increaseSpaceLength=increaseSpaceLength+1, source=source)
    return output 

2. Flask视图层无需修改，直接返回该字符串：

return_string = printingData(name, source=r"C:/.../.../")
return render_template('my-form.html', result=return_string)

3. 修改HTML模板，用<pre>标签包裹内容：

<body>   
    <pre>{{ result }}</pre>   
</body>

方法2：用CSS控制缩进（语义化列表） #

如果想保持列表结构，通过CSS的padding-left实现层级缩进：

1. 修改Python函数，返回包含层级和内容的字典列表：

temp_storage = {}

def printingData(Unit, increaseSpaceLength, source="."):
    items = []
    items.append({"level": increaseSpaceLength, "content": f"Searching for {Unit}:"})
    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:
                items.append({"level": increaseSpaceLength, "content": f"No sub Units found for {Unit}"})
            else:
                next_level = increaseSpaceLength + 1
                for unit_element in theSpot:
                    unit_id = unit_element.get("Unit")
                    location = unit_element.get("Name")
                    if unit_id != "":
                        items.append({"level": next_level, "content": f"Child Unit ID:{unit_id}"})
                        items.append({"level": next_level, "content": f"Unit Location:{location}"})
                        items.extend(printingData(unit_id, increaseSpaceLength=next_level+1, source=source))
    return items 

2. 修改HTML模板，通过动态CSS设置缩进：

<body>   
   <ul style="list-style: none; padding-left: 0;">  
       {% for item in result %}   
       <li style="padding-left: {{ item.level * 20 }}px;">{{ item.content }}</li>   
       {% endfor %}   
   </ul>   
</body>

方法3：嵌套列表（最符合层级语义） #

针对层级化数据，用嵌套列表实现原生缩进：

1. 修改Python函数，返回嵌套结构的字典：

temp_storage = {}

def printingData(Unit, increaseSpaceLength, source="."):
    node = {
        "content": f"Searching for {Unit}:",
        "children": []
    }
    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:
                node["children"].append({"content": f"No sub Units found for {Unit}", "children": []})
            else:
                for unit_element in theSpot:
                    unit_id = unit_element.get("Unit")
                    location = unit_element.get("Name")
                    if unit_id != "":
                        node["children"].append({"content": f"Child Unit ID:{unit_id}", "children": []})
                        node["children"].append({"content": f"Unit Location:{location}", "children": []})
                        node["children"].extend(printingData(unit_id, increaseSpaceLength=increaseSpaceLength+1, source=source))
    return [node]

2. 修改HTML模板，用Jinja2宏递归渲染嵌套列表：

<body>
    {% macro render_node(node) %}
        <li>
            {{ node.content }}
            {% if node.children %}
                <ul>
                    {% for child in node.children %}
                        {{ render_node(child) }}
                    {% endfor %}
                </ul>
            {% endif %}
        </li>
    {% endmacro %}

    <ul>
        {% for node in result %}
            {{ render_node(node) }}
        {% endfor %}
    </ul>
</body>

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