如何通过客户端HTML读取并输出Google Apps Script的PropertiesService

已知日志显示foo变量已从客户端HTML发送至Code.js，且PropertiesService中的bar键已完成设置并记录。

解决方案 #

客户端无法直接访问PropertiesService，必须通过google.script.run调用服务器端的Google Apps Script（GAS）函数获取属性值，再通过回调函数将结果显示在页面上。使用span标签承载输出内容是可行的，具体步骤如下：

1. 在GAS中新增获取属性的函数，用于返回目标属性值；
2. 在HTML中添加带ID的span元素，作为内容输出容器；
3. 通过google.script.run调用GAS函数，并设置成功回调更新页面显示。

修改后的代码 #

HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
    function sendFoo() {
      var foo = document.getElementById("foo").value;
      // 调用setBar同时设置回调，更新bar的显示
      google.script.run
        .withSuccessHandler(updateBarDisplay)
        .setBar(foo);
      document.getElementById("foo").value = '';
    }

    // 回调函数：将获取到的bar值更新到页面
    function updateBarDisplay(barValue) {
      document.getElementById("bar-display").textContent = barValue;
    }

    // 页面加载时初始化bar的显示
    window.onload = function() {
      google.script.run
        .withSuccessHandler(updateBarDisplay)
        .getBar();
    }
    </script>
  </head>
  <body>
    foo is:<input type="text" id="foo" />
    <input type="button" value="sendFoo" onclick="sendFoo()" /> <br> <br> <br>
    bar is: <span id="bar-display"></span>
  </body>
</html>

Google Apps Script代码 #

function setBar(foo) {
  PropertiesService.getScriptProperties().setProperty("foo",foo);
  PropertiesService.getScriptProperties().setProperty("bar","foo received");
  logProperties();
  // 返回bar的值给客户端回调
  return PropertiesService.getScriptProperties().getProperty("bar");
}

// 新增函数：获取bar属性值并返回给客户端
function getBar() {
  return PropertiesService.getScriptProperties().getProperty("bar") || "未设置";
}

function initProperties() {
  PropertiesService.getScriptProperties().deleteAllProperties();
}

function logProperties() {
  Logger.log("logProperties..");
  var keys = PropertiesService.getScriptProperties().getKeys();
  keys.forEach(key => {
    Logger.log(key);
    Logger.log(PropertiesService.getScriptProperties().getProperty(key));
  });
}

function getUrl() {
  var url = ScriptApp.getService().getUrl();
  return url;
}

function doGet(e) {
  initProperties();
  var htmlOutput = HtmlService.createTemplateFromFile('WebApp');
  htmlOutput.url = getUrl();
  return htmlOutput.evaluate();
}

原日志内容 #

Cloud logs
Oct 15, 2022, 5:27:14 PM
Info
logProperties..
Oct 15, 2022, 5:27:14 PM
Info
bar
Oct 15, 2022, 5:27:14 PM
Info
foo
Oct 15, 2022, 5:27:14 PM
Info
sending foo

说明 #

本示例基于Google Apps Script实现，已尽可能简化但保留核心逻辑。
参考：如何从Web应用调用Google Apps Script函数

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