如何使用 JavaScript 将 Google 电子表格数据拉入 Google Apps 脚本中的 HTML答案

【问题标题】：How to use JavaScript to pull Google Spreadsheet data into HTML within Google Apps Script如何使用 JavaScript 将 Google 电子表格数据拉入 Google Apps 脚本中的 HTML
【发布时间】：2019-11-14 01:42:56
【问题描述】：

我正在 Google 表格中制作一个脚本，该脚本将根据表格中的数据弹出一个包含字段的表单，然后在提交表单时创建一个电子邮件草稿。

我正在使用 Google Apps 脚本生成 HTML 表单。表单字段需要从工作表中的数据生成（例如，带有来自工作表范围内的选项的下拉菜单）。

这是我在 HTML 中的内容：

  <p id="demo"></p>
  <script>
    var Sheet = SpreadsheetApp.getActiveSpreadsheet();
    var Value = Sheet.getRange("E2").getValue();
    document.getElementById("demo").innerHTML = Value;
  </script>

...但是应该显示字符串的表单区域是空白的。

作为参考，这是可行的：

  <p id="demo"></p>
  <script>
    var Moment = Date();
    document.getElementById("demo").innerHTML = Moment;
  </script>

当我包含第二个脚本时，它成功显示了日期字符串。

那么，SpreadsheetApp（或之后的东西）在这里不起作用的原因是什么？

我对 JS 等非常陌生，因此非常感谢您的帮助 :) 谢谢！！！

【问题讨论】：

这些是服务器端命令 var Sheet = SpreadsheetApp.getActiveSpreadsheet(); var Value = Sheet.getRange("E2").getValue(); 它们进入脚本编辑器中的 .gs 文件 Learn More Here...这些是 Javascript 命令 var Moment = Date(); document.getElementById("demo").innerHTML = Moment; 它们在 html 文件中的 <script></script> 标记之间运行Learn More Here
Displaying Spreadsheet Data in html

标签： javascript html forms google-apps-script google-sheets

【解决方案1】：

第二个代码之所以有效，是因为您在 HTML 文件中使用了纯 Javascript 函数，在这两者之间可以由您的浏览器执行并且就像一个魅力。

第一个代码不起作用，因为您正在调用一个应用程序脚本函数，它当然使用 Javascript，但它不是纯 Javascript。它不能在浏览器上作为通用 Javascript 呈现，因为 Apps Script 是在 google 服务器上呈现的，因此您必须使用另一种语法。

但是可以做到，而且很简单，有三种方法：

从 HTML 模板调用 Apps 脚本函数
直接从 HTML 模板调用 Apps Script API
将变量从 Apps 脚本推送到 HTML 模板

我将在此处展示您正在尝试的示例，这是第二种选择：基本上你只需要改变：

<script> var myvar = ... </script> 为<? var myvar = ... />

当显示变量时使用

<?= myvar ?>

从模板调用 Apps 脚本函数：

  <? var value = SpreadsheetApp.openById("FILE_ID").getSheets()[0].getRange("E2").getValue(); ?>
  <p><?= value ?></p>

从 appscript 渲染 html 文件时只需调用 evaluate()

function doGet(e) {
  return HtmlService.createTemplateFromFile('index.html').evaluate();
}

在这里，您将找到解释这一点的三种方法：

https://developers.google.com/apps-script/guides/html/templates#calling_apps_script_functions_from_a_template

【讨论】：