如何将 Google 电子表格中的数据作为 javascript 变量获取到 HTML？答案

【问题标题】：How to get data from Google Spreadsheet to HTML as a javascript variable?如何将 Google 电子表格中的数据作为 javascript 变量获取到 HTML？
【发布时间】：2020-05-17 17:52:41
【问题描述】：

我正在尝试使用 html 服务创建 webapp。这是我的代码。

code.gs 文件中的代码。

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

function getData() {
var sss = SpreadsheetApp.openById('xxxx'); 
var rawData =  sss.getDataRange().getValues()     
var data = []                       
for (var i = 0; i< rawData.length; i++){

data.push(rawData[i])

}
  return data
}

现在我想将此数据作为 javascript 变量访问以进行进一步处理（用于创建带有查询的表）。 userendhtml.html中的代码是

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
<script>
 var data2 = getData();
</script>
  </body>
</html>

这不会将数据存储到变量data2。那么如何在javascript中的变量中从电子表格中获取数据？

【问题讨论】：

看看Templated HTML

标签： javascript html google-apps-script google-sheets google-sheets-api

【解决方案1】：

您想将google.script.run 与withSuccessHandler(...) 结合使用

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <script>
      var data2;

      google.script.run.withSuccessHandler(function(ret){
        data2 = ret;
      }).getData();
    </script>
  </body>
</html>

【讨论】：

抱歉，我不小心再次编辑了您的一个答案。我必须更加小心。我又把它删掉了。

【解决方案2】：

您可以使用我提供给您的模板化 Html 参考中的技术。但你也可以这样做：

<script>
  var data2;
window.onload=function(){
  google.script.run
  .withSuccessHandler(function(dt){
    data2=dt;
    document.getElementById('myDiv').innerHTML=data2;
  .getData();
}
</script>

模板化的 html 方法在服务器上加载，这种方法在 dom 加载后加载。

我只是将这个示例作为对话框进行了测试

    function dialogTest() {
      var html='<div id="mydiv"></div>';
      html+='<script>var data2;window.onload=function(){google.script.run.withSuccessHandler(function(dt){data2=dt;document.getElementById("mydiv").innerHTML=data2;}).getMtData();}</script>';
      SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html), 'Dialog Test');
    }

    function getMtData() {
      return 'Hello World';
    }

【讨论】：

这似乎不起作用。当我添加警报（数据2）时，它给出了未定义的。表示数据没有解析成变量data2。
你在哪里执行 alert(data2)？
代码中的 </script> 之前。花括号后}.
嗯，这是在 DOM 加载之前发生的，所以这并不奇怪。
那么如何在html中使用data2进行进一步处理呢？说如果我想做document.getElementById('myDiv').innerHTML = data2。如果它在脚本中不可用以供进一步使用，则不会使用data2。