时间戳

首页 > 解决方案 > HTML href 作为 Google Apps 脚本变量

javascript - HTML href 作为 Google Apps 脚本变量

问题描述

我正在制作一个从 Google 电子表格自动生成的索引。我的脚本读取两列，一列带有名称，另一列带有链接。然后它生成一个所有名称为<li><a>"The name"</a></li>. 我的想法是将电子表格上的链接传递给href=" "每个名称，但我不知道该怎么做。

这是我的 .gs 和 .html 代码，以及指向我的电子表格的链接（要处理它，您可能需要复制一份）。 https://docs.google.com/spreadsheets/d/1fEYqPnp9SIS7I2lzeeoEP7Pui4l0dgLD6t7D9Lki9oE/edit?usp=sharing

GS代码

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}
  
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Index');
  
  function readData() {
    var range = spreadsheet.getRange(1, 1,spreadsheet.getLastRow(), spreadsheet.getLastColumn()).getValues();
    Logger.log(range);
    return range;
};

function readLinks() {
    var links = spreadsheet.getRange(1, 2,spreadsheet.getLastRow(), spreadsheet.getLastColumn()).getValues();
    Logger.log(links);
    return links;
};

HTML 代码

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div>
      <ul>
        <li id="proced"><a id="link"></a></li>
      </ul>
    </div>
        
    <script>
    
    function getData(values) {
    values.forEach(function(item, index) {
    var x = document.getElementById("link");
    x.innerHTML += '<li><a href="">' + item[0] + '</li></a>';
    });
    }
    google.script.run.withSuccessHandler(getData).readData();
    
    </script>
  </body>
</html>

标签： javascripthtmlgoogle-apps-scriptgoogle-sheets

解决方案

下面是修改后的代码

GS代码

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}
  
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Index');
  
function readData() {
    var data = spreadsheet.getDataRange().getValues()
    Logger.log(data)
    return data
}

HTML 代码

<script>

function getData(values) {
    var x = document.getElementById("link");
    values.forEach(function(item) {
        x.innerHTML += '<li><a href="' + item[1] + '">' + item[0] + '</li></a>';
    });
}
google.script.run.withSuccessHandler(getData).readData();

</script>

变化

以下是我所做的主要更改：

.gs

  • 现在该函数不再单独获取名称和链接，而是readData使用getDataRange.

  • 这将返回一个二维数组，如下所示：

    [
  ["Google", "http://www.google.com/"],
  ["Facebook", "http://www.facebook.com/"],
  ["Twitter", "http://www.twitter.com/"],
  ["Youtube", "https://www.youtube.com"],
  ["Instagram", "http://www.instagram.com/"],
  ["Reddit", "http://www.reddit.com/"],
  ["Bing", "http://www.bing.com/"],
]

  • 这使脚本更快，但是如果您想单独获取范围，则需要使用getRange("A1:A7")或使用获取最后一行的方法等。然后获取两个范围。最好的办法是将它们放在一个二维数组中以将它们一起传递给 HTML，否则会使事情变得过于复杂，因为您需要构造一个回调链来获取名称然后等待链接，然后在客户端将它们链接在一起。

.html

  • 移到var x = document.getElementById("link");forEach 循环之外。这对于每个项目都保持不变，因此无需每次都重新初始化。
  • 将 forEach 参数更改function(item)为不使用索引。
  • 由于每个项目现在都是一维数组，例如 =>["Google", "http://www.google.com/"]您可以调用：
    • item[0]=>"Google"
    • item[1]=>"http://www.google.com/"
  • 所以结果 forEach 是： 
    values.forEach(function(item) {
    x.innerHTML += '<li><a href="' + item[1] + '">' + item[0] + '</li></a>';
});

推荐阅读