谷歌表格侧边栏下拉框动态拉取Sheet数据失败求助

你的问题核心是HTML模板的Scriptlets没有被正确解析执行，导致模板语法直接输出到页面上。下面是具体的解决步骤：

1. 修正侧边栏的加载逻辑（code.gs） #

必须使用HtmlService.createTemplateFromFile()加载HTML文件，再通过evaluate()执行模板中的Scriptlets，不能用createHtmlOutputFromFile()（后者会把Scriptlets当作静态文本）。示例代码：

function showSidebar() {
  // 替换成你的HTML文件名，比如sidebar.html
  const template = HtmlService.createTemplateFromFile('sidebar');
  const renderedHtml = template.evaluate();
  SpreadsheetApp.getUi().showSidebar(renderedHtml);
}

2. 优化HTML模板代码 #

你的现有Scriptlets语法是正确的，但可以增加空数据判断避免异常，同时清理不必要的空格：

<select class="form-control form-control-sm" id="visual_type" name="visual_type" required>
  <? const visuals = getVisualData(); ?>
  <? if (visuals?.length) { ?>
    <? visuals.forEach(vs => { ?>
      <option value="<?= vs ?>"><?= vs ?></option>
    <? }) ?>
  <? } else { ?>
    <option value="" disabled>无可用数据</option>
  <? } ?>
</select>

3. 验证数据返回的准确性 #

虽然你确认getVisualData()能正确返回数据，但可以加日志进一步验证：

function getVisualData(){
  const data = SpreadsheetApp.getActiveSpreadsheet()
    .getRangeByName('VISUAL_TYPES')
    .getValues()
    .flat()
    .filter(vs => vs !== '');
  console.log('获取到的可视化类型:', data); // 在Apps Script编辑器的「日志」中查看输出
  return data;
}

原因说明 #

当用createHtmlOutputFromFile()加载HTML时，系统会直接输出文件的原始内容，不会处理其中的Scriptlets模板语法，所以你看到的是<?= vs ?>字符串。而createTemplateFromFile()+evaluate()的组合会先执行所有Scriptlets代码，将变量替换为实际值后再生成最终的HTML内容，这样下拉框就能正确显示数据了。

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