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

【问题标题】：Using Google Apps Script, can we display a data in the HTML page as soon as somebody enters that data into Google spreadsheet?使用 Google Apps 脚本，我们可以在有人将数据输入 Google 电子表格后立即在 HTML 页面中显示该数据吗？
【发布时间】：2021-01-20 20:35:22
【问题描述】：

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

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

index.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>

code.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();
}

电子表格

【问题讨论】：

标签： javascript google-apps-script google-sheets web-applications

【解决方案1】：

我相信你的目标如下。

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

问题和解决方法：

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

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

修改后的脚本：

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

Google Apps 脚本端 (`Code.gs`)：

函数分为以下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>

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

注意：

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

参考：

Class google.script.run

【讨论】：

谢谢。我们如何将其用作“table”而不是“h3”？

问题和解决方法：

修改后的脚本：

Google Apps 脚本端 (Code.gs)：

HTML&Javascript 端 (index.html):

注意：

参考：

Google Apps 脚本端 (`Code.gs`)：

HTML&Javascript 端 (`index.html`):