App Script实现3个Google Sheets数据HTML表格的异常排查

问题根源 #

1. GS函数重名覆盖：index.gs里定义了三个同名的getData函数，JavaScript（含Google Apps Script）中同名函数会被最后定义的覆盖，所有google.script.run.getData()调用都会返回最后一个函数的结果（Sheet3的数据）。
2. DataTable配置错误：showData1和showData2中错误使用data1、data2作为数据源配置项，DataTable标准配置项应为data。
3. 函数调用不匹配：JS中所有请求都调用同一个getData()，未对应到不同的数据源函数。

修复步骤 #

1. 修改index.gs：给数据函数重命名 #

将三个数据获取函数改为不同名称，确保每个函数对应一个Sheet：

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate();
}

// 获取Sheet1的数据
function getDataSheet1() {
  var spreadSheetId = "1_eBCSgD2Uzyh9pvB0v2Qu3Sl_T4NaW7HkpQ9iAtN3Ig";
  var dataRange = "Sheet1!A2:E";
  var range = Sheets.Spreadsheets.Values.get(spreadSheetId, dataRange);
  return range.values; 
}

// 获取Sheet2的数据
function getDataSheet2() {
  var spreadSheetId = "1_eBCSgD2Uzyh9pvB0v2Qu3Sl_T4NaW7HkpQ9iAtN3Ig";
  var dataRange = "sheet2!A2:D";
  var range = Sheets.Spreadsheets.Values.get(spreadSheetId, dataRange);
  return range.values;
}

// 获取Sheet3的数据
function getDataSheet3() {
  var spreadSheetId = "1_eBCSgD2Uzyh9pvB0v2Qu3Sl_T4NaW7HkpQ9iAtN3Ig";
  var dataRange = "sheet3!A2:D";
  var range = Sheets.Spreadsheets.Values.get(spreadSheetId, dataRange);
  return range.values; 
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
    .getContent();
}

2. 修改javascript.html：修正函数调用和DataTable配置 #

• 每个表格的请求对应正确的GS函数
• 将data1、data2改为标准配置项data

// 渲染第一个表格（Sheet1数据）
function showData(dataArray){
  $(document).ready(function(){
    $('#data-table-1').DataTable({
      data: dataArray,
      lengthMenu: [
        [3000, 6000, 9000, 12000],
        [3000, 6000, 9000, 12000],
      ],
      columns: [
        {"title":"Model"},
        {"title":"Serial Number"},
        {"title":"Layout"},
        {"title":"AD"},
        {"title":"Email"},
      ]
    });
  });
}
google.script.run.withSuccessHandler(showData).getDataSheet1();

// 渲染第二个表格（Sheet2数据）
function showData1(dataArray1){
  $(document).ready(function(){
    $('#data-table-2').DataTable({
      data: dataArray1,
      lengthMenu: [
        [3000, 6000, 9000, 12000],
        [3000, 6000, 9000, 12000],
      ],
      columns: [
        {"title":"Serial Number"},
        {"title":"User Name/Email"},
        {"title":"Info"},
        {"title":"Device Type"},
      ]
    });
  });
}
google.script.run.withSuccessHandler(showData1).getDataSheet2();

// 渲染第三个表格（Sheet3数据）
function showData2(dataArray2){
  $(document).ready(function(){
    $('#data-table-3').DataTable({
      data: dataArray2,
      lengthMenu: [
        [3000, 6000, 9000, 12000],
        [3000, 6000, 9000, 12000],
      ],
      columns: [
        {"title":"IMEI"},
        {"title":"User Name"},
        {"title":"Email"},
        {"title":"Model"},
      ]
    });
  });
}
google.script.run.withSuccessHandler(showData2).getDataSheet3();

3. 额外优化（可选） #

移除HTML中重复引入的jQuery：保留较新的3.5.1版本即可，避免版本冲突。

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