Google Apps Script实现HTML无刷新展示Google表格新增数据

你现在写的代码已经可以正常加载展示表格里的历史数据，要实现“表格有新录入时、前端页面不用刷新就自动更新内容”的效果，完全可以依托Google Apps Script的原生能力实现，不需要额外搭建外部服务。
当前关联的表格界面参考如下：

原有实现的局限 #

你当前的逻辑是服务端模板单次渲染：页面首次发起请求时，GAS在服务端一次性读取全部表格数据，把数据嵌入HTML模板生成最终页面返回给浏览器。等页面加载完成后，前后端的连接就断开了，自然没法感知到表格后续新增的内容，也就做不到自动更新。

具体改造方法 #

整个改造只需要调整两个文件的代码逻辑，核心思路是把一次性的模板渲染，改成“页面加载时先拉一次初始数据，之后定时和服务端同步最新表格内容、动态更新页面DOM”的模式。

第一步：调整code.gs的逻辑 #

把原来全放在doGet里的表格读取逻辑拆出来，单独做一个可被前端直接调用的通用函数，让首次加载和后续动态刷新都能复用这段读取逻辑：

// 全局定义关联的目标电子表格
const ss = SpreadsheetApp.getActiveSpreadsheet();

// doGet函数只负责返回基础HTML页面，不再做模板数据注入
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('表格数据实时看板');
}

// 新增专门供前端调用的函数，返回最新的表格数据
function getLatestSheetData() {
  const ws = ss.getSheetByName('list');
  const lastRow = ws.getLastRow();
  // 表格为空时直接返回空数组，避免读取时报错
  if (lastRow < 2) return [];
  const rowCount = lastRow - 1;
  return ws.getRange(2, 1, rowCount, 2).getValues();
}

第二步：改造index.html的前端逻辑 #

删掉原来服务端循环渲染的模板代码，换成前端动态拉取数据、渲染DOM的逻辑，搭配定时轮询实现无刷新更新：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .data-item {
        padding: 8px 0;
        border-bottom: 1px solid #eee;
      }
    </style>
  </head>
  <body>
    <h1>Hello world</h1>
    <!-- 用来承载动态渲染数据的容器 -->
    <div id="data-container"></div>

    <script>
      // 页面加载完成后立刻拉取一次初始数据
      window.addEventListener('load', function() {
        refreshData();
        // 每3秒自动拉取一次最新数据，单位为毫秒
        setInterval(refreshData, 3000);
      })

      // 拉取最新数据、更新页面的通用函数
      function refreshData() {
        google.script.run
          .withSuccessHandler(function(latestData) {
            const container = document.getElementById('data-container');
            container.innerHTML = '';
            // 遍历最新数据，生成DOM节点插入页面
            latestData.forEach(function(row) {
              const itemEl = document.createElement('h3');
              itemEl.className = 'data-item';
              itemEl.innerText = row.join(' | ');
              container.appendChild(itemEl);
            })
          })
          .getLatestSheetData();
      }
    </script>
  </body>
</html>

落地注意事项 #

• 轮询间隔不要设置得过短，建议保持在3秒以上，避免触发Google Apps Script的服务调用配额限制
• 如果表格后续数据量增长较大，可以优化拉取逻辑：前端记录上次拉取到的最后一行行号，服务端只返回行号大于记录值的新增行，大幅减少数据传输量
• 整个流程不需要额外申请外网权限，所有交互都在GAS的页面容器内完成，部署上线后即可正常使用

内容的提问来源于stack exchange，提问作者Souvik paul