如何使用JavaScript将Code.gs中Google Sheet提取的数组生成动态HTML表格

1. 后端Code.gs 代码配置 #

你已经完成的Sheet取数逻辑不需要大改，只需要新增两个必要函数：

// Code.gs 完整示例
// 固定入口函数，用于加载HTML页面
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index'); // 这里替换成你自己的HTML文件名
}

// 对外暴露的取数函数，前端可直接调用
function getSearchResult() {
  // 下方替换成你自己的从Sheet提取数据的逻辑，最终返回二维数组即可
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const targetSheet = ss.getSheetByName('你的工作表名称');
  // 示例：获取整张表的内容，返回格式为二维数组：[[表头1,表头2], [行1值1,行1值2], ...]
  const sheetData = targetSheet.getDataRange().getValues();
  return sheetData;
}

2. 前端HTML页面代码 #

不需要引入额外依赖，用GAS内置的google.script.runAPI即可完成前后端数据通信，动态渲染表格逻辑如下：

<!-- index.html 完整示例 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>动态表格演示</title>
</head>
<body>
  <!-- 空表格容器，所有内容动态生成 -->
  <table id="dataTable" border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse;">
  </table>

  <script>
    // 页面加载完成后自动拉取数据
    window.addEventListener('load', () => {
      // 调用后端Code.gs中的getSearchResult函数
      google.script.run
        .withSuccessHandler(renderTable) // 拉取成功后执行渲染逻辑
        .withFailureHandler(err => alert('数据加载失败：' + err)) // 拉取失败报错
        .getSearchResult();
    })

    // 动态渲染表格函数，自动适配数组行数
    function renderTable(data) {
      const table = document.getElementById('dataTable');
      table.innerHTML = ''; // 每次渲染前清空旧内容，保证行数和最新数据同步

      // 遍历二维数组生成表格
      data.forEach(rowItem => {
        const row = document.createElement('tr');
        rowItem.forEach(cellItem => {
          const cell = document.createElement('td');
          cell.textContent = cellItem;
          row.appendChild(cell);
        })
        table.appendChild(row);
      })
    }
  </script>
</body>
</html>

3. 核心逻辑说明 #

• 前后端通信完全依赖GAS官方内置的google.script.run接口，你只需要在后端写好返回数组的函数，前端直接调用即可，不需要手动做数据序列化处理
• 每次渲染表格前先清空容器的旧内容，不管新返回的数组行数是多少，都会自动生成对应行数的表格，完全适配动态数据
• 如果你的搜索功能需要传递参数，直接在调用后端函数时传入即可：google.script.run.getSearchResult('搜索关键词')，后端函数对应修改为接收参数的形式即可

内容的提问来源于stack exchange，提问作者Azim Majeed