时间戳

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

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

问题描述

使用 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();
}

电子表格

在此处输入图像描述

标签： javascriptgoogle-apps-scriptgoogle-sheetsweb-applications

解决方案

我相信你的目标如下。

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

问题和解决方法：

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

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

修改后的脚本：

请按如下方式修改您的 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。我认为您还可以使用fetchJavascript 从电子表格中检索值。

参考：

推荐阅读