Google Sheets中如何用Apps Script变量设置Bootstrap进度条

1. 修改后端Apps Script代码 #

原有代码直接返回拼接完成的HTML字符串，不利于前端单独提取百分比数值，调整为返回结构化数据即可，统计逻辑保持不变：

function cellCounter() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheets = ss.getSheets();
  var cells = 0;
  sheets.forEach(function(sheet){
    cells = cells + sheet.getMaxRows() * sheet.getMaxColumns();
  });
  var division = cells/10000000*100;
  var percentage = +division.toFixed(0);
  // 返回结构化数据，包含前端需要的所有字段
  return {
    usedCells: cells,
    percentage: percentage,
    tipText: "📈 每个Google Sheets文档最多支持1000万个单元格，当前已使用 <strong>" + percentage + "%</strong> 容量，共占用 <strong>" + cells + " 个单元格</strong>。"
  };
}

2. 修改前端HTML代码 #

给进度条和文本容器添加唯一id，通过Apps Script原生提供的google.script.run方法调用后端函数，拿到数据后动态更新进度条属性和宽度：

<!-- 用量提示文本容器 -->
<div id="usageTip"></div>
<!-- 进度条组件 -->
<div class="progress" style="margin: 10px 0;">
  <div 
    id="cellProgressBar"
    class="progress-bar progress-bar-striped progress-bar-animated" 
    role="progressbar" 
    aria-valuenow="0" 
    aria-valuemin="0" 
    aria-valuemax="100" 
    style="width: 0%"
  ></div>
</div>

<script>
// 页面加载完成后拉取统计数据
window.addEventListener('load', function() {
  google.script.run
    .withSuccessHandler(function(res) {
      const bar = document.getElementById('cellProgressBar');
      const tip = document.getElementById('usageTip');
      
      // 动态绑定进度值
      bar.setAttribute('aria-valuenow', res.percentage);
      bar.style.width = res.percentage + '%';

      // 可选：根据用量阈值切换进度条颜色
      if(res.percentage >= 90) bar.classList.add('bg-danger');
      else if(res.percentage >= 70) bar.classList.add('bg-warning');
      else bar.classList.add('bg-success');

      // 渲染提示文本
      tip.innerHTML = res.tipText;
    })
    .cellCounter();
});
</script>

注意事项 #

• 后端只负责计算和返回纯数据，所有DOM渲染逻辑放到前端处理，后续调整样式、新增交互不需要修改后端代码
• 必须使用google.script.run调用后端函数，这是Apps Script侧前端和服务端通信的原生方案，自行写fetch请求会遇到跨域、鉴权失败的问题
• 进度条初始宽度和aria-valuenow设为0即可，数据加载完成后会自动替换为真实统计值

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