Flask HTML渲染Pandas DataFrame时链接HTML代码显示为文本的解决方案咨询

问题描述 #

我尝试通过Flask在HTML中渲染Pandas DataFrame，该DataFrame包含一列字符串（name）和一列URL（url），希望将二者合并为第三列，使其显示字符串同时可跳转至对应URL。

现有Python代码：

def make_clickable(url, name):
    return '<a href="{}" rel="noopener noreferrer" target="_blank">{}</a>'.format(url,name)
df['link'] = df.apply(lambda x: make_clickable(x['url'], x['name']), axis=1)
return render_template('home.html', tables=[df1[0:20].to_html(header="true", index= False, justify="center")])

HTML模板代码：

{% for table in tables %}
{{ table|safe }}
{% endfor %}

目前遇到的问题：生成的HTML链接代码被直接渲染为文本，而非解析为可点击的HTML元素，需要找到能实现表格自定义且让HTML代码正常解析的替代方案。

解决方案1：修正to_html参数，关闭HTML转义 #

Pandas的to_html()方法默认会转义HTML特殊字符，导致<a>标签被转换成文本形式。只需在调用to_html时添加escape=False参数，即可保留原始HTML标签：

修改Python代码中的to_html调用部分：

return render_template('home.html', tables=[df[0:20].to_html(header="true", index=False, justify="center", escape=False)])

配合模板中已有的{{ table|safe }}过滤器，链接就能正常解析为可点击的HTML元素。

解决方案2：手动在Jinja2模板中构建表格（更灵活的自定义方式） #

如果需要对表格样式、结构做精细化调整，可以跳过to_html，直接将DataFrame数据传递给模板，手动循环生成表格：

调整Python代码 #

将DataFrame转为字典列表，方便模板遍历：

def make_clickable(url, name):
    return '<a href="{}" rel="noopener noreferrer" target="_blank">{}</a>'.format(url,name)
df['link'] = df.apply(lambda x: make_clickable(x['url'], x['name']), axis=1)
# 取前20行，转为字典列表
data = df[0:20].to_dict('records')
return render_template('home.html', data=data)

自定义HTML模板 #

手动构建表格结构，对链接列使用|safe过滤器解析HTML：

<!-- 可根据需求添加自定义CSS样式 -->
<table style="width: 80%; margin: 0 auto; border-collapse: collapse; text-align: center;">
  <thead>
    <tr style="background-color: #f0f0f0;">
      <!-- 根据你的实际列名修改表头 -->
      <th style="border: 1px solid #ddd; padding: 8px;">名称</th>
      <th style="border: 1px solid #ddd; padding: 8px;">跳转链接</th>
    </tr>
  </thead>
  <tbody>
    {% for row in data %}
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px;">{{ row.name }}</td>
      <td style="border: 1px solid #ddd; padding: 8px;">{{ row.link|safe }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

这种方式可以完全控制表格的样式和结构，比如添加边框、背景色、调整宽度等，适配不同的页面布局需求。

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