在GAS中传递HTML字符串到HTML邮件时无法解析的问题

原代码 #

var alias = GmailApp.getAliases();
var subject = header + " Team";
var body = "";
var htmlTemplate = HtmlService.createTemplateFromFile('daily-email');
htmlTemplate.mgrname = "Test1";
htmlTemplate.tmname = "Test2";
htmlTemplate.mDayUpdate = '<table><tr><th>Result</th><th>Points</th></tr>' + 
  '<tr><td>5 points for Gryffindor</td></tr>' +
  '<tr><td>10 points for Hufflepuff</td></tr></table>';
var htmlBody = htmlTemplate.evaluate().getContent();
GmailApp.sendEmail('user@me.com',subject, body,{from: alias[0], name:"The Tourney Committee",htmlBody: htmlBody});
return;
}

问题描述 #

传递给mDayUpdate的HTML字符串在邮件中显示为转义后的字面量（如<table>...</table>直接显示），无法被解析成表格。这是因为HtmlService模板默认会转义变量内容以防范XSS风险，但此处需要直接渲染HTML结构。

解决方案 #

方案1：修改HTML模板的输出语法

在daily-email.html模板文件中，将原本的变量输出语法<?= mDayUpdate ?>替换为<?!= mDayUpdate ?>。<?!= ?>会直接输出未转义的HTML内容，模板渲染时就会将字符串解析为表格：

<!-- daily-email.html 中的对应部分 -->
<div class="update-content">
  <?!= mDayUpdate ?>
</div>

方案2：将HTML字符串包装为安全HTML对象

如果不想修改模板写法，可在脚本中将HTML字符串包装为HtmlOutput对象后传递给模板变量。模板使用<?= mDayUpdate ?>即可输出未转义的HTML：

// 修改脚本中mDayUpdate的赋值行
htmlTemplate.mDayUpdate = HtmlService.createHtmlOutput(`
<table>
  <tr><th>Result</th><th>Points</th></tr>
  <tr><td>5 points for Gryffindor</td></tr>
  <tr><td>10 points for Hufflepuff</td></tr>
</table>
`);

动态内容适配 #

针对每日动态生成的不定数量条目，可先在脚本中循环构建HTML字符串，再用上述任一方案传递：

// 示例：从动态数组生成表格HTML
var dynamicData = [
  {result: "5 points for Gryffindor"},
  {result: "10 points for Hufflepuff"},
  {result: "-3 points for Slytherin"}
];

var tableHtml = '<table><tr><th>Result</th><th>Points</th></tr>';
dynamicData.forEach(item => {
  tableHtml += `<tr><td>${item.result}</td></tr>`;
});
tableHtml += '</table>';

// 用方案1传递字符串
htmlTemplate.mDayUpdate = tableHtml;
// 或用方案2传递安全对象
// htmlTemplate.mDayUpdate = HtmlService.createHtmlOutput(tableHtml);

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