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

问题描述 投票：0回答：2

使用 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>

代码.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
2个回答
3
投票

我相信你的目标如下。

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

问题和解决方法：

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

在这个答案中，作为解决方法，我想使用

setInterval
刷新H3的标签。当此解决方法反映到您的脚本中时，它会变成如下所示。

修改后的脚本：

请按如下方式修改您的 Google Apps 脚本和 HTML&Javascript。当以下修改后的脚本用于Web应用程序时，当使用浏览器打开Web应用程序页面时，'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>
  • 在此修改后的脚本中，使用 Javascript 刷新 
    H3
    的标签。 
    main
    函数每 5 秒运行一次。当 
    H3
    的现有值与当前 Spreadsheet 的值不同时，更新 
    H3
    的值。当 
    H3
    的现有值与当前 Spreadsheet 的值相同时，
    H3
    的值不会更新。

注：

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

参考：

0
投票

使用 Google Apps 脚本，我们是否可以在有人将数据输入 Google 电子表格后立即在 HTML 页面中显示该数据？下面的有用文章详细介绍了这是一篇很长的文章，这就是我给出链接的原因

有用的这篇文章在这里阅读：https://tmirror.co/create-login-system-management-using-appscript-with-google-sheet/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.