通过GAS与HTML设置对话框文本框初始值遇阻，求解决方案

问题背景 #

已实现从电子表格单元格读取数据的功能，需要将获取的数据设置为HTML对话框中文本框的初始值，但当前代码无法完成动态赋值操作。

现有代码问题分析 #

当前代码的核心问题在于：HTML中使用的<?= initialValue ?>是模板渲染语法，需要在创建HTML输出时就将变量传递给模板；而你在GAS中通过htmlOutput.append()添加的脚本变量，是在模板渲染完成后才注入的，因此模板无法识别该变量，导致文本框初始值为空。

解决方案 #

方案一：使用服务器端模板渲染（推荐） #

通过HtmlService.createTemplateFromFile()创建模板，直接将数据传递给模板变量，再渲染为HTML输出。

修改后的GAS代码：

function onRemoveOrEditButton() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const initialValue = sheet.getRange("A1").getValue();
  // 创建模板实例
  const template = HtmlService.createTemplateFromFile('Dialog');
  // 为模板变量赋值
  template.initialValue = initialValue;
  // 渲染模板并设置对话框宽度
  const htmlOutput = template.evaluate().setWidth(300);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, '编辑对话框');
}

HTML代码保持不变：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet"/>
    <style>
      .form-control {
        width: 200px;
      }
    </style>
  </head>
  <body>
      <input class="form-control input-block" type="text" id="name" name="name" placeholder="name" style="width: 300px;" value="<?= initialValue ?>"><br>
  </body>
</html>

方案二：客户端JS动态赋值 #

如果不想使用模板，可以在页面加载完成后，通过客户端脚本读取GAS注入的变量，再设置文本框的值。

GAS代码保持不变：

function onRemoveOrEditButton() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const initialValue = sheet.getRange("A1").getValue();
  var htmlOutput = HtmlService.createHtmlOutputFromFile('Dialog').setWidth(300);
  htmlOutput.append('<script>var initialValue = ' + JSON.stringify(initialValue) + ';</script>');
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, '编辑对话框');
}

修改后的HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet"/>
    <style>
      .form-control {
        width: 200px;
      }
    </style>
  </head>
  <body>
      <input class="form-control input-block" type="text" id="name" name="name" placeholder="name" style="width: 300px;"><br>
      <script>
        // 等待DOM加载完成后赋值
        document.addEventListener('DOMContentLoaded', () => {
          document.getElementById('name').value = initialValue;
        });
      </script>
  </body>
</html>

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