如何从Google Apps Script（GAS）向HTML传递参数？

你的代码里有几个关键错误导致无法正常传递数值，同时也可以用更简洁的方式实现需求，下面分两种方案说明：

方案一：修正原有代码逻辑 #

原代码的核心问题：

1. 函数名大小写不匹配：HTML里initialize函数调用的是getDataFromHtml()，但定义的函数是getDataFromHTML()，大小写差异导致函数未找到，初始化失败
2. 输入框值设置错误：number类型的输入框需要通过value属性设置数值，而非innerText
3. 提交按钮变量未正确获取：原按钮点击事件里的location和numlines没有实际取值逻辑，无法传递正确参数

修正后的HTML代码： #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <style>
      .button {
        background-color: blue;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 5px;
      }
      p.Lato{font-size: 20px; font-family: Lato,Arial,serif;}
    </style>
    <script>
      function getDataFromHTML() {
        var idData = "NumLines";
        var dataEncoded = document.getElementById(idData).innerHTML;
        var data = JSON.parse(atob(dataEncoded));
        return data;
      }
      function initialize() {
          var data = getDataFromHTML(); // 修正函数名大小写
          document.getElementById("LineCount").value = data.num; // 改用value属性设置数值
      }
    
      window.onload = initialize;

      // 新增提交逻辑，正确获取页面参数
      function submitForm() {
        var selectedLocation = document.querySelector('input[name="location"]:checked').value;
        var numLines = document.getElementById("LineCount").value;
        google.script.run.AddOn_More_Location(selectedLocation, numLines);
        google.script.host.close();
      }
    </script>
    <h1 style="font-family: Arial">ADDITIONAL ENHANCEMENTS</h1>
    <form style="font-family: Arial">
        The number of lines to be added <input type=number id="LineCount" value="1" min="1" max="10"  step="1">
        <br><br>
        <p>Where in the ENHANCEMENTS Section should the new lines be placed?</p>
        <div style="font-family: Arial">
              <input type="radio" name="location" value="START">START of Section<br>
              <input type="radio" name="location" value="ABOVE">ABOVE Current line<br>
              <input type="radio" name="location" value="BELOW">BELOW Current line<br>
              <input type="radio" name="location" value="END" checked>END of Section<br>
          <br>
          <input type="button" class="button" value="SUBMIT" onclick="submitForm()">
          <input type="button" class="button" value="CANCEL" onclick="google.script.host.close();" style="background-color: gray;">
        </div>
    </form>
  </body>
</html>

GAS代码无需修改，保持原有逻辑即可，它会把编码后的数值插入到页面的隐藏div中。

方案二：使用HTML模板（更简洁推荐） #

Google Apps Script的HTML模板可以直接将后端变量注入到页面中，无需通过隐藏div传递，代码更直观易维护。

修正后的GAS代码： #

function AddOn_More(){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sht = ss.getActiveSheet();
  var numlines = sht.getActiveRange().getValues().length; // 获取选中行数

  // 创建HTML模板对象
  var template = HtmlService.createTemplateFromFile("EnhancementsLocation.html");
  template.numLines = numlines; // 将行数变量传递给模板

  // 生成对话框并显示
  var widget = template.evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setTitle('sample')
    .setHeight(450)
    .setWidth(550);

  SpreadsheetApp.getUi().showModalDialog(widget,"dineDK");
}

对应的HTML模板代码： #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <style>
      .button {
        background-color: blue;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 5px;
      }
      p.Lato{font-size: 20px; font-family: Lato,Arial,serif;}
    </style>
    <script>
      // 提交逻辑，正确获取页面参数
      function submitForm() {
        var selectedLocation = document.querySelector('input[name="location"]:checked').value;
        var numLines = document.getElementById("LineCount").value;
        google.script.run.AddOn_More_Location(selectedLocation, numLines);
        google.script.host.close();
      }
    </script>
    <h1 style="font-family: Arial">ADDITIONAL ENHANCEMENTS</h1>
    <form style="font-family: Arial">
        <!-- 直接使用模板变量设置输入框默认值 -->
        The number of lines to be added <input type=number id="LineCount" value="<?= numLines ?>" min="1" max="10"  step="1">
        <br><br>
        <p>Where in the ENHANCEMENTS Section should the new lines be placed?</p>
        <div style="font-family: Arial">
              <input type="radio" name="location" value="START">START of Section<br>
              <input type="radio" name="location" value="ABOVE">ABOVE Current line<br>
              <input type="radio" name="location" value="BELOW">BELOW Current line<br>
              <input type="radio" name="location" value="END" checked>END of Section<br>
          <br>
          <input type="button" class="button" value="SUBMIT" onclick="submitForm()">
          <input type="button" class="button" value="CANCEL" onclick="google.script.host.close();" style="background-color: gray;">
        </div>
    </form>
  </body>
</html>

这种方法省去了前端解析编码数据的步骤，直接在页面渲染时注入数值，逻辑更清晰，也减少了出错概率。

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