Google Apps Script WebApp不同HTML页拉取Sheet指定范围数据咨询

核心逻辑是给服务端的getData方法增加页面类型入参，根据不同参数匹配对应的取数规则，前端调用时传递当前页面的标识参数即可，具体修改步骤如下：

1. 修改服务端 pull_sheet.gs 代码 #

替换原有getData方法的逻辑，内置不同页面的取数配置：

function getData(pageType) {
  // 按需求配置各页面对应的表格ID和取数范围，可自行调整
  const pageConfig = {
    "english": {
      sheetId: "替换为你的实际Sheet ID1",
      dataRange: "Sheet1!A1:C20" // 替换为English页面需要的实际数据范围
    },
    "more": {
      sheetId: "替换为你的实际Sheet ID1",
      dataRange: "Sheet1!E1:G15" // 替换为More页面需要的实际数据范围
    },
    "others": {
      sheetId: "替换为你的实际Sheet ID2",
      dataRange: "Sheet1!A1:D30" // 替换为Others页面需要的实际数据范围
    }
  }
  // 校验参数合法性
  if(!pageConfig[pageType]) throw new Error("无效的页面请求参数")
  const target = pageConfig[pageType]
  // 拉取对应范围的数据
  const sheet = SpreadsheetApp.openById(target.sheetId)
  const data = sheet.getRange(target.dataRange).getValues()
  return data
}

2. 修改三个前端页面的接口调用逻辑 #

分别在三个HTML页面的JS调用部分，传入对应页面的标识参数：

• English.HTML 调用示例

google.script.run
  .withSuccessHandler(data => {
    // 沿用你原有English页面的数据渲染逻辑即可
    console.log("English页面数据：", data)
  })
  .withFailureHandler(err => console.error("拉取失败：", err))
  .getData('english')

• More.HTML 调用示例

google.script.run
  .withSuccessHandler(data => {
    // 沿用你原有More页面的数据渲染逻辑即可
    console.log("More页面数据：", data)
  })
  .withFailureHandler(err => console.error("拉取失败：", err))
  .getData('more')

• Others.HTML 调用示例

google.script.run
  .withSuccessHandler(data => {
    // 沿用你原有Others页面的数据渲染逻辑即可
    console.log("Others页面数据：", data)
  })
  .withFailureHandler(err => console.error("拉取失败：", err))
  .getData('others')

后续如果需要调整取数规则，直接修改pull_sheet.gs里的pageConfig配置即可，不需要改前端代码。

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