使用Google脚本，一旦有人将数据输入到Google电子表格中，我们就能在HTML页面中显示数据吗？
使用Google脚本，一旦有人将数据输入到Google电子表格中，我们就能在HTML页面中显示数据吗？
提问于 2021-01-20 20:35:22
使用Google脚本，一旦有人将数据输入到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();
}电子表格
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-21 01:26:03
我相信你的目标如下。
- 编辑电子表格时要刷新
<h3><?= list[i] ?></h3>。 - 您希望在不重新加载Web页面的情况下实现这一点。
问题和解决办法：
在当前阶段，不幸的是，如果不重新加载Web页面，HTML端就不能从Google脚本端直接更新。因此，在这种情况下，需要从Javascript一侧刷新页面中的HTML。
在这个答案中，作为一种解决办法，我想使用H3来刷新setInterval标记。当这个解决方案反映到您的脚本中时，如下所示。
修改脚本：
请修改您的Google脚本和HTML&Javascript如下。当以下修改的脚本用于Web应用程序时，当使用浏览器打开Web应用程序页面时，‘H3’的值将每5秒自动刷新一次。
Google脚本端(Code.gs)：
该函数与以下两个函数分开。
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的现有值与当前电子表格的值不同时，更新H3的值。如果H3的现有值与当前电子表格的值相同，则不会更新H3的值。
注意：
- 当您修改Web的脚本时，请将Web重新部署为新版本。这样，最新的脚本就会反映到Web应用程序中。请小心点。
- 我认为有几种方法可以从电子表格中检索值。在这个答案中，使用
google.script.run，因为您使用的是模板HTML。我认为您也可以使用Javascript的fetch从电子表格中检索值。
参考资料：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65817247
复制相关文章
相似问题
腾讯云开发者
