使用 Google Apps 脚本，我们可以在有人将数据输入 Google 电子表格后立即在 HTML 页面中显示数据吗？

Question

使用 Google Apps 脚本，一旦有人将数据输入 Google 电子表格，如何在 HTML 页面（不刷新页面）中显示数据？

我编写了以下代码，它呈现了电子表格中存在的所有数据。 但是我无法在不需要刷新页面的情况下添加动态呈现数据的功能。

索引.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Hello world</h1>
    
    <? for(var i=0; i<list.length; i++){ ?>
      
      <h3><?= list[i] ?></h3>
    
    <? } ?>

  </body>
</html>

代码.gs

var ss = SpreadsheetApp.getActiveSpreadsheet();

function doGet() {

  var ws = ss.getSheetByName('list');
    
  var lastRow = ws.getLastRow();

  var numRow = lastRow - 1;

  var vals = ws.getRange(2,1,numRow,2).getValues();

  var temp = HtmlService.createTemplateFromFile('index');

  temp.list = vals;

  return temp.evaluate();
}

电子表格

Answer 1

我相信你的目标如下。

您想在编辑电子表格时刷新<h3><?= list[i]?></h3> 。
您希望在不重新加载 Web 应用程序页面的情况下实现此目的。

问题和解决方法：

不幸的是，在当前阶段，如果不重新加载 Web 应用程序页面，则无法从 Google Apps 脚本端直接更新 HTML 端。 所以在这种情况下，需要从Javascript侧刷新页面中的HTML。

在这个答案中，作为一种解决方法，我想使用setInterval刷新 H3 的标签。 当此解决方法反映到您的脚本时，它变为如下。

修改后的脚本：

请按如下方式修改您的 Google Apps 脚本和 HTML&Javascript。 以下修改脚本用于 Web 应用程序时，当用浏览器打开 Web 应用程序页面时，“H3”的值每 5 秒自动刷新一次。

Google Apps 脚本端（ `Code.gs` ）：

function 分为以下 2 个功能。

function doGet() {
  var temp = HtmlService.createTemplateFromFile('index');
  temp.list = getValues();
  return temp.evaluate();
}

function getValues() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var ws = ss.getSheetByName('list');
  var lastRow = ws.getLastRow();
  var numRow = lastRow - 1;
  return ws.getRange(2,1,numRow,2).getValues();
}

HTML&Javascript 端（ `index.html` ）：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Hello world</h1>
    <div id="sample">
    <? for(var i=0; i<list.length; i++){ ?>
      <h3><?= list[i] ?></h3>
    <? } ?>
    </div>
  </body>

<script>
function main() {
  google.script.run.withSuccessHandler(v => {
    const div = document.getElementById('sample');
    const value = [...div.children].map(e => e.innerHTML);
    if (value.length != v.length || value.some((e, i) => e != v[i].join(","))) {
      while(div.firstChild) div.removeChild(div.firstChild);
      v.forEach(e => {
        const h3 = document.createElement("h3");
        h3.innerHTML = e.join(",");
        div.appendChild(h3);
      });
    }
  }).getValues();
}
setInterval(main, 5000);  // In this sample, the tags of H3 are refreshed every 5 seconds.
</script>
</html>

在这个修改后的脚本中，使用 Javascript 刷新了H3的标签。 main function 每 5 秒运行一次。 当H3的现有值与当前电子表格的值不同时，更新H3的值。 当H3的现有值与当前电子表格的值相同时，不更新H3的值。

笔记：

当您修改 Web Apps 的脚本时，请将 Web Apps 重新部署为新版本。 这样，最新的脚本就会反映到 Web 应用程序中。 请注意这一点。
我认为有几种方法可以从电子表格中检索值。 在此答案中，使用了google.script.run ，因为您使用的是模板 HTML。 我认为您还可以使用 Javascript 的fetch从电子表格中检索值。

参考：

Class google.script.run

使用 Google Apps 脚本，我们可以在有人将数据输入 Google 电子表格后立即在 HTML 页面中显示数据吗？

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-01-21 01:26:03

问题和解决方法：

修改后的脚本：

Google Apps 脚本端（ `Code.gs` ）：

HTML&Javascript 端（ `index.html` ）：

笔记：

参考：

使用 Google Apps 脚本，我们可以在有人将数据输入 Google 电子表格后立即在 HTML 页面中显示数据吗？

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-01-21 01:26:03

问题和解决方法：

修改后的脚本：

Google Apps 脚本端（ Code.gs ）：

HTML&Javascript 端（ index.html ）：

笔记：

参考：

解决方案1
2 已采纳 2021-01-21 01:26:03

Google Apps 脚本端（ `Code.gs` ）：

HTML&Javascript 端（ `index.html` ）：