何时使用Google App Script的createTemplateFromFile与createHtmlOutputFromFile

核心区别 #

• createHtmlOutputFromFile()：直接读取指定HTML文件的原始内容，返回静态的HtmlOutput对象。文件里写的是什么，最终显示的就是什么，完全不具备动态内容替换能力。
• createTemplateFromFile()：返回HtmlTemplate中间对象，必须调用evaluate()方法才能转换成HtmlOutput。它的核心价值是支持动态内容嵌入——你可以在HTML文件中使用<?= ... ?>（输出表达式结果）或<? ... ?>（执行代码逻辑）语法，调用evaluate()时会执行这些内嵌的GAS代码，将结果替换到模板中，生成最终的动态HTML。

模板的具体用途（附示例） #

模板的本质是让你能把GAS后端的数据、逻辑和HTML前端展示结合起来，常见场景包括：

1. 插入动态数据

比如在对话框中显示当前登录用户的邮箱：
HTML文件（UserInfo.html）：

<p>当前登录用户：<?= Session.getActiveUser().getEmail() ?></p>

GAS代码：

function showUserDialog() {
  const template = HtmlService.createTemplateFromFile('UserInfo');
  const htmlOutput = template.evaluate();
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, '用户信息');
}

执行后对话框会显示实际的用户邮箱，而非代码片段。如果用createHtmlOutputFromFile()，则会原样显示<?= Session.getActiveUser().getEmail() ?>。

2. 动态生成重复内容

比如从表格读取数据，在对话框中生成列表：
HTML文件（DataList.html）：

<ul>
<? data.forEach(item => { ?>
  <li><?= item ?></li>
<? }) ?>
</ul>

GAS代码：

function showDataList() {
  const sheet = SpreadsheetApp.getActiveSheet();
  const data = sheet.getRange('A1:A5').getValues().flat();
  const template = HtmlService.createTemplateFromFile('DataList');
  template.data = data; // 将后端数据传给模板变量
  const htmlOutput = template.evaluate();
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, '数据列表');
}

这里通过模板的循环逻辑，自动把表格数据转换成列表项，实现动态内容生成。

总结 #

• 静态HTML内容直接用createHtmlOutputFromFile()，简单高效；
• 需要动态数据插入、逻辑执行（循环、条件判断等）时，必须使用createTemplateFromFile()，它是连接GAS后端与HTML前端的桥梁。

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