如何通过Google Apps Script实现选中Google Sheets单元格时更新HTML文件

核心思路 #

由于Google表格的HTML界面以iframe形式加载，无法直接监听表格的选中事件，因此我们需要结合服务器端onSelectionChange触发器和客户端定时轮询实现自动同步：

1. 用onSelectionChange监听表格选中变化，将选中行的数据存入用户属性；
2. 客户端HTML页面定时从服务器拉取最新选中行数据，更新textarea内容。

完整代码实现 #

1. 服务器端脚本（Google Apps Script） #

// 打开HTML侧边栏的函数（运行此函数启动功能）
function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('你的HTML文件名');
  SpreadsheetApp.getUi().showSidebar(html);
}

// 监听表格选中变化的内置触发器
function onSelectionChange(e) {
  var sheet = e.source.getActiveSheet();
  var rowIndex = e.range.getRow();
  
  // 跳过表头行（根据你的表格结构调整行号）
  if (rowIndex === 1) {
    PropertiesService.getUserProperties().setProperty('selectedRowData', null);
    return;
  }
  
  // 一次性获取当前行第2-4列的数据（比多次调用getRange更高效）
  var rowData = sheet.getRange(rowIndex, 2, 1, 3).getValues()[0];
  // 将数据转为JSON字符串存入用户属性，实现跨端传递
  PropertiesService.getUserProperties().setProperty('selectedRowData', JSON.stringify(rowData));
}

// 供客户端调用，获取最新选中行数据
function getSelectedRowData() {
  var dataStr = PropertiesService.getUserProperties().getProperty('selectedRowData');
  return dataStr ? JSON.parse(dataStr) : null;
}

2. 客户端HTML代码 #

<textarea id="column1"></textarea>
<textarea id="column2"></textarea>
<textarea id="column3"></textarea>
<textarea id="column4"></textarea>
<div id="doneMessage"></div>

<script>
  // 页面加载时初始化并启动定时轮询
  window.addEventListener('load', function() {
    // 首次加载获取数据
    getData();
    // 每隔500ms检查一次数据更新（可根据需求调整间隔）
    setInterval(getData, 500);
  });

  function getData() {
    google.script.run.withSuccessHandler(updateElement).getSelectedRowData();
  }

  function updateElement(values) {
    if (!values) {
      // 选中表头行时清空所有textarea
      document.querySelectorAll('textarea').forEach(el => el.value = '');
      document.getElementById('doneMessage').innerHTML = '';
      return;
    }

    var column1Value = values[0];
    var column2Value = values[1];
    var column3Value = values[2];

    document.getElementById('column1').value = column1Value;
    document.getElementById('column2').value = column2Value;
    document.getElementById('column3').value = column3Value;
    document.getElementById('column4').value = column3Value;

    document.getElementById('doneMessage').innerHTML = '';
  }
</script>

关键说明 #

• onSelectionChange触发器：这是Google Apps Script内置的简单触发器，无需手动配置，函数名正确即可自动监听表格选中变化；
• PropertiesService：用于在服务器端临时存储数据，解决服务器与客户端无法直接通信的问题；
• 定时轮询：客户端通过setInterval定期拉取数据，弥补了Google Apps Script无法从服务器主动推送数据到客户端的局限；
• 性能优化：将多次getRange调用合并为一次获取整行指定列数据，减少API调用次数，提升运行效率。

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