谷歌电子表格列值到 html 页面答案

【问题标题】：Google spreadsheet column value to html page谷歌电子表格列值到 html 页面
【发布时间】：2020-03-06 15:56:49
【问题描述】：

我想根据电子表格单元格数据在我的 googlesites 中创建一个通知页面。以下是来自 W3 CSS Taps 的示例 html。 W3 CSS Taps

请帮助我如何将单元格值放入

标签。

function getData(){  
  var ssID = "SHEET ID",
      ws = SpreadsheetApp.openById(ssID).getSheets()[2],
      data = ws.getRange(1, 1,ws.getLastRow(),4).getValues();
  var lastRow = getLastRow(data);

    Logger.log(data);
  return data;
}

  <div id="London" class="w3-container w3-border city">
    <h2>London</h2>
    <p id="str1"></p>
  </div>

  <div id="Paris" class="w3-container w3-border city" style="display:none">
    <h2>Paris</h2>
    <p id="str2"></p> 
  </div>

  <div id="Tokyo" class="w3-container w3-border city" style="display:none">
    <h2>Tokyo</h2>
    <p id="str3"></p>
  </div>

【问题讨论】：

使用您的 W3 学校链接作为参考，您还记得添加您的 CDN 吗？ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
是的，CDN 正在工作，我正在尝试使用带有电子表格的应用程序脚本来获取 html 值。我从应用程序脚本中查看了模板化 HTML，但找不到解决方案。
阅读google.script.run了解更多详情，请参阅tag info page 中的 Html 最佳实践。

标签： html google-apps-script spreadsheet

【解决方案1】：

您可以尝试使用App Script 的HTMLService。

有制作模板化 HTML in the documentation 的实际指南。更具体地针对您的情况，您实际上可以push variables from apps script to your templates。

所以在你的项目中创建一个 html 文件，如下所示：

  <div id="London" class="w3-container w3-border city">
    <h2>London</h2>
    <p id="str1"><?= london ?></p>
  </div>

  <div id="Paris" class="w3-container w3-border city" style="display:none">
    <h2>Paris</h2>
    <p id="str2"><?= paris ?></p> 
  </div>

  <div id="Tokyo" class="w3-container w3-border city" style="display:none">
    <h2>Tokyo</h2>
    <p id="str3"><?= tokyo ?></p>
  </div>

然后通过应用程序脚本提供此页面，如下所示：

function doGet() {
  var t = HtmlService.createTemplateFromFile('Index');
  var ss = SpreadsheetApp.getActiveSheet();
  t.london = ss.getRange("A2").getValue();
  t.paris = ss.getRange("B2").getValue();
  t.tokyo = ss.getRange("C2").getValue();
  return t.evaluate();
}

当然，您可以更改将值获取到模板化 HTML 背后的逻辑。

另外一个选项可能是拥有一个能够通过 JavaScript 获取此信息的函数，对于该选项，请查看Client-to-Server Communication 的本指南。

【讨论】：