如何从Google Sheets拉取价格数据并展示到指定ID的H3标签中

首先确认你的Sheet1结构需符合以下规则：

• 第2行开始，A列存容量档位，B列存对应价格，且三行顺序和你页面展示的档位顺序一致（第一行50-74加仑、第二行74-99加仑、第三行100-124加仑）

方法1：模板直接渲染（无需额外JS） #

直接修改你的HTML文件，用Apps Script内置模板语法输出对应价格即可：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>50-74 gallons: </h1><h3 id="firstPrice"><?= list[0][1] ?></h3>
    <h1>74-99 gallons: </h1><h3 id="secondPrice"><?= list[1][1] ?></h3>
    <h1>100-124 gallons: </h1><h3 id="thirdPrice"><?= list[2][1] ?></h3>
  </body>
</html>

方法2：客户端JS动态赋值（适合需要后续动态更新价格的场景） #

修改HTML文件，添加脚本逻辑赋值：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>50-74 gallons: </h1><h3 id="firstPrice"></h3>
    <h1>74-99 gallons: </h1><h3 id="secondPrice"></h3>
    <h1>100-124 gallons: </h1><h3 id="thirdPrice"></h3>
    <script>
      // 接收模板传递过来的价格数组
      const priceList = JSON.parse('<?= JSON.stringify(list) ?>');
      // 给对应标签赋值
      document.getElementById('firstPrice').textContent = priceList[0][1];
      document.getElementById('secondPrice').textContent = priceList[1][1];
      document.getElementById('thirdPrice').textContent = priceList[2][1];
    </script>
  </body>
</html>

部署注意事项 #

修改代码后需要重新部署新版本的Web App才会生效，部署时权限建议按需求设置：如果需要公开访问，权限选择「任何人，甚至匿名用户」即可。

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