Google Apps Script问题：dateToExport在HTML与脚本间传递失效

问题场景 #

流程如下：

1. 运行脚本exportButton并传入dateToExport变量；
2. 弹出showConflict_HTML弹窗，用户点击“Yes, Overwrite and Export”按钮；
3. 预期调用exportOrderData并传入dateToExport，但点击按钮后无任何反应，HTML中的google.script.run.exportOrderData(1, dateToExport_captured)未执行，且无报错信息。

错误原因 #

当前代码直接给HtmlOutput对象添加自定义属性dateToExportFromServerTemplate的方式，无法将服务器端变量传递到前端HTML的JS代码中。HtmlService的HtmlOutput对象不支持这种直接挂载属性让前端访问的方式，必须通过模板引擎将变量注入到HTML中。

修复方案及代码修改 #

1. 修改服务器端脚本exportOrderData #

使用createTemplateFromFile创建HTML模板，赋值变量后通过evaluate()生成可访问变量的HtmlOutput：

function exportOrderData(override, dateToExport) {
  if(override == 1){
    execute_exportOrderData();
    easterEgg = 1;
  } else if(override == 0){
    // 创建HTML模板
    var template = HtmlService.createTemplateFromFile('showConflict_HTML');
    // 给模板变量赋值
    template.dateToExportFromServerTemplate = dateToExport;
    // 处理模板生成最终的HtmlOutput
    var userInterface = template.evaluate();

    SpreadsheetApp.getUi()
      .showModelessDialog(userInterface, 'Existing Customer Order(s) on ' + dateWithConflict);
  }
}

2. 修改HTML文件showConflict_HTML #

通过模板语法<?= ?>将服务器端变量注入到前端JS中，用JSON.stringify确保日期等特殊类型正确解析：

<!-- "showConflict_HTML". 点击覆盖按钮后调用exportOrderData函数 !-->
<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <link href="https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap" rel="stylesheet">
</head>
<body>
  <button id='my_button'>Yes, Overwrite and Export</button>
  
  <script>
    // 通过模板注入服务器端变量
    var dateToExport_captured = <?= JSON.stringify(dateToExportFromServerTemplate) ?>;

    // 绑定按钮点击事件
    document.getElementById('my_button').addEventListener('click', _ => {
      google.script.run.loadingCircleEffect();
      google.script.run.exportOrderData(1, dateToExport_captured);
    });
  </script>
</body>
</html>

关键说明 #

• 使用createTemplateFromFile替代createHtmlOutputFromFile，才能启用模板变量注入功能；
• JSON.stringify用于处理日期、对象等特殊类型，避免变量在前端解析出错；
• 模板中的<?= ?>标签会在服务器端处理时，将变量值直接替换到JS代码中，前端就能直接获取到dateToExport的正确值。

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