如何在Web应用前端实现Google Sheets全工作表搜索及结果展示功能

一、修改后端Google Apps Script函数 #

原函数为硬编码搜索文本且仅输出日志，需调整为接收前端传入的搜索关键词，并返回结构化的搜索结果：

function searchIt(searchKeyword) {
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  const textFinder = spreadsheet.createTextFinder(searchKeyword);
  const matches = textFinder.findAll();
  // 整理结构化结果，包含工作表名、行号、列号、单元格内容
  return matches.map(cell => {
    const sheet = cell.getSheet();
    return {
      sheetName: sheet.getName(),
      row: cell.getRow(),
      column: cell.getColumn(),
      value: cell.getValue()
    };
  });
}

// 返回前端页面的入口函数
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

二、编写前端HTML页面 #

在同一个GAS项目中新建HTML文件（命名为index），实现输入、触发搜索、展示结果的功能：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .container {
        max-width: 800px;
        margin: 20px auto;
        padding: 0 15px;
      }
      .search-bar {
        margin-bottom: 20px;
      }
      #searchInput {
        padding: 8px;
        width: 70%;
        margin-right: 10px;
      }
      #searchBtn {
        padding: 8px 16px;
        cursor: pointer;
      }
      #resultArea {
        margin-top: 20px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
      }
      th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="search-bar">
        <input type="text" id="searchInput" placeholder="输入要搜索的内容...">
        <button id="searchBtn">开始搜索</button>
      </div>
      <div id="resultArea"></div>
    </div>

    <script>
      document.getElementById('searchBtn').addEventListener('click', () => {
        const keyword = document.getElementById('searchInput').value.trim();
        const resultArea = document.getElementById('resultArea');
        
        if (!keyword) {
          resultArea.innerHTML = '<p>请输入搜索关键词</p>';
          return;
        }

        // 调用后端GAS函数
        google.script.run
          .withSuccessHandler(results => {
            if (results.length === 0) {
              resultArea.innerHTML = '<p>未找到匹配内容</p>';
              return;
            }
            // 渲染结果为表格
            let tableHtml = '<table><thead><tr><th>工作表名称</th><th>行号</th><th>列号</th><th>内容</th></tr></thead><tbody>';
            results.forEach(item => {
              tableHtml += `<tr><td>${item.sheetName}</td><td>${item.row}</td><td>${item.column}</td><td>${item.value}</td></tr>`;
            });
            tableHtml += '</tbody></table>';
            resultArea.innerHTML = tableHtml;
          })
          .withFailureHandler(error => {
            resultArea.innerHTML = `<p>搜索出错：${error.message}</p>`;
          })
          .searchIt(keyword);
      });

      // 支持回车键触发搜索
      document.getElementById('searchInput').addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
          document.getElementById('searchBtn').click();
        }
      });
    </script>
  </body>
</html>

三、部署Web应用 #

1. 在GAS编辑器中点击右上角的部署 → 新部署
2. 点击类型下拉框，选择Web应用
3. 配置部署设置：
   • 执行：选择我（确保以你的权限访问表格）
   • 谁可以访问：根据需求选择（测试阶段可选任何人，甚至匿名，正式使用建议限制访问范围）
4. 点击部署，复制生成的Web应用URL，访问该URL即可使用搜索功能

四、注意事项 #

• 首次运行需完成授权，确保GAS项目拥有访问目标Google Sheets的权限
• 若搜索结果过多，可添加分页逻辑优化前端展示
• 如需调整搜索规则，可在createTextFinder后追加配置，比如matchCase(false)（忽略大小写）、matchEntireCell(false)（模糊匹配）等

内容的提问来源于stack exchange，提问作者Marco Antonio Ortiz Salgado