如何在Google Apps Script中为Scriptlet函数传入页面DOM参数？

核心原因 #

Scriptlet（<?= ... ?>）是服务器端预渲染逻辑，在HTML发送到客户端前就执行完毕，此时客户端DOM还未加载，无法获取页面元素的innerHTML值，所以直接拼接Scriptlet的方式行不通。必须改用「客户端获取值 → 异步调用服务器函数 → 渲染结果」的流程。

具体实现步骤 #

1. 模态窗口HTML代码 #

移除直接用Scriptlet调用函数的写法，改为客户端JS触发请求：

<!-- 存储URL的元素 -->
<div id="workingFile">https://docs.google.com/spreadsheets/d/your-sheet-id...</div>
<!-- 表格容器 -->
<div id="tableContainer"></div>

<script>
// 页面加载完成后自动执行（或绑定按钮点击事件）
document.addEventListener('DOMContentLoaded', () => {
  // 1. 获取页面中的URL
  const sheetUrl = document.getElementById('workingFile').innerHTML.trim();
  
  // 2. 异步调用服务器端函数，传入URL参数
  google.script.run
    .withSuccessHandler(renderTable) // 成功回调：渲染表格
    .withFailureHandler(error => {
      console.error('加载失败:', error);
      document.getElementById('tableContainer').textContent = '加载数据出错，请检查URL是否正确';
    })
    .loadMyProgramme(sheetUrl);
});

// 渲染表格的函数
function renderTable(dataArray) {
  const container = document.getElementById('tableContainer');
  container.innerHTML = ''; // 清空容器
  
  // 创建表格元素
  const table = document.createElement('table');
  table.style.borderCollapse = 'collapse';
  
  // 遍历二维数组构建表格行和单元格
  dataArray.forEach(row => {
    const tr = document.createElement('tr');
    row.forEach(cell => {
      const td = document.createElement('td');
      td.textContent = cell;
      td.style.border = '1px solid #ccc';
      td.style.padding = '8px';
      tr.appendChild(td);
    });
    table.appendChild(tr);
  });
  
  container.appendChild(table);
}
</script>

2. 服务器端（Code.gs）代码 #

修改loadMyProgramme函数，接收URL参数并返回表格数据：

function loadMyProgramme(sheetUrl) {
  try {
    // 通过URL打开表格
    const spreadsheet = SpreadsheetApp.openByUrl(sheetUrl);
    // 获取目标工作表（可根据需求改为getSheetByName指定表名）
    const sheet = spreadsheet.getActiveSheet();
    // 返回数据范围的二维数组
    return sheet.getDataRange().getValues();
  } catch (error) {
    throw new Error('无法访问表格：' + error.message);
  }
}

补充说明 #

• 如果需要手动触发加载（比如点击按钮），把DOMContentLoaded事件换成按钮点击事件即可：

  document.getElementById('loadButton').addEventListener('click', () => {
    // 同上获取URL和调用函数的逻辑
  });
  

• 注意权限：确保当前用户有访问目标Google Sheets的权限，否则openByUrl会抛出权限错误。

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