Apps 脚本 return 值从服务器函数到 html 形式

Question

我需要 Apps 脚本专业人士的帮助。我有通过 web-app 实现的项目。我在服务器端写了脚本

var url = "https://docs.google.com/spreadsheets/d/1s8l-8N8dI-GGJi_mmYs2f_88VBcnzWfv3YHgk1HvIh0/edit?usp=sharing";
var sprSRCH = SpreadsheetApp.openByUrl(url);
let sheetSRCHSSCC = sprSRCH.getSheetByName("PUTAWAY_TO");
 
function GetQ(){
  
  var QPLAN = sheetSRCHSSCC.getRange("M2:M").getValues().filter(String).length;
  var myArray = sheetSRCHSSCC.getRange("O2:O" + (QPLAN + 1)).getValues();
  
  var QFACT = 0;
   for (i = 0; i < myArray.length; i++) { 
     if (myArray[i] != "") {
       QFACT += 1
     }
   }
   
}

I need to return values from this function to inputs:
QFACT to FACT
QPLAN to PLAN

            <div class="input-field col s3">
              <input disabled value="" id="PLAN" type="text" >
              <label for="disabled">PLAN</label>
            </div>
            <div class="input-field col s3">
              <input disabled value="" id="FACT" type="text" >
              <label for="disabled">FACT</label>
            </div>

我将不胜感激。我是新手))

Answer 1

如果您使用 Apps 脚本部署 Web 应用程序，我可以看到 2 种可能性：

1/ 在页面加载时获取数据（且仅在加载时）：

在code.gs中：

function doGet() {
  var tmp = HtmlService.createTemplateFromFile('page');
  tmp.QFACT = "hello";
  tmp.PLAN = "World!";
  return tmp.evaluate();
}

在page.html中：

<html>
  <body>
    <h5><?= QFACT ?></h5>
    <h5><?= QPLAN ?></h5>
  </body>
</html>

2/ 如果需要通过点击按钮刷新数据，或者其他方式，则需要进行不同的操作：

在你的项目中添加一个页面-js.html，并在你的page.html

末尾绑定

<html>
  <body>
    <h5 id="QFACT"></h5>
    <h5 id="QPLAN"></h5>
  </body>
  <?!= include("page-js"); ?> 
</html>

然后在你的页面-js.html :

<script>
  function refresh() {
    google.script.run.withSuccessHandler(callback).refresh();
  }

  function callback(e) {
    document.getElementById('QPLAN').innerHTML = e.QPLAN;
    document.getElementById('QFACT').innerHTML = e.QFACT;
  }
</script>

最后在 code.gs 中添加 refresh() 函数：

  function refresh() {
    var obj = {};

    obj.QPLAN = "QPLAN";
    obj.QFACT = "QFACT";

    return obj;
  }

Apps 脚本 return 值从服务器函数到 html 形式

Apps script return values from server function to html form

web-applications

google-apps-script