HTML邮件模板动态添加表格行异常问题求助

问题排查与修复步骤 #

1. 修正后端变量名错误 #

你的后端代码中定义了tableData变量，但在processData里引用了未定义的table，这会导致data值为空或报错，直接修正变量名即可：

val tableData = '<tbody>
<tr><td>ABC</td> <td>5</td> <td>100</td></tr>
<tr><td>PQR</td> <td>2</td> <td>200</td></tr>
<tr><td>XYZ</td> <td>1</td> <td>75</td></tr>
</tbody>';
const processData = {
      data: tableData, // 将table改为tableData
      userName: "XYZ"
  }

2. 规范HTML表格结构 #

原模板的表头<tr>未包裹在<thead>标签中，和后端传递的<tbody>组合后结构不规范，部分邮件客户端可能解析异常。修改模板的表格部分：

<table style="font-family: arial, sans-serif; border-collapse: collapse; width: 100%;">
    <thead>
        <tr>
            <th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Product</th>
            <th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Quantity </th>
            <th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Price</th>
        </tr>
    </thead>
    {{data}}
</table>

3. 关闭模板引擎的HTML转义 #

大部分模板引擎默认会转义变量中的HTML字符（比如把<转成<），导致表格代码变成纯文本显示。根据你使用的引擎调整语法：

• Handlebars：使用三个大括号 {{{data}}}
• EJS：使用 <%- data %>
• Thymeleaf：将 [[${data}]] 改为 [(${data})]

4. 验证HTML内容正确性 #

如果修改后仍显示异常，检查tableData字符串是否被意外转义。确保字符串中的<、>等字符没有变成<、>，可以在模板渲染前打印processData.data确认内容。

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