谷歌脚本将元素附加到 HTML 文档答案

【问题标题】：Google Script append Element to HTML Document谷歌脚本将元素附加到 HTML 文档
【发布时间】：2019-11-13 14:26:09
【问题描述】：

我想将我的 Google 脚本中的数据加载到我的 HTML 文档中并通过电子邮件发送。当我运行下面的代码时，我收到错误ReferenceError: "document" is not defined.。

我不明白错误的原因，或者如何解决它。

我的 GS 脚本：

function sendEmail(){
  //Email Template
  var emailTemp = HtmlService.createTemplateFromFile("template"); // Access to the HTML document
  // Tab Stichprobe
  var stichprobe = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Stichprobe");
  var stichprobecapital = stichprobe.getRange("A2:L"+stichprobe.getLastRow()).getDisplayValues(); // Array AssetName
  var software = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Software");
  var softwarecapital = software.getRange("A2:E"+software.getLastRow()).getDisplayValues();
  var test=[];
  var stichprobelen = stichprobe.getRange("A2:A"+stichprobe.getLastRow()).getDisplayValues().length; 
  var softwarelen = software.getRange("A2:A"+software.getLastRow()).getDisplayValues().length; 
  var softwareindex = [];

  //Config
  var config = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Config");
  var subject = config.getRange("B1:B1").getValue();
  var counter = config.getRange("B5:B5").getValue();
  var subject = config.getRange("B1:B1").getValue();
  var replyto = config.getRange("B3:B3").getValue();
  var name = config.getRange("B2:B2").getValue();
  var error = config.getRange("B6:B6").getValue();
  var cc = config.getRange("B4:B4").getValue();

  for (var a = 0; a<stichprobelen; a++){
    for (var i = 0; i<softwarelen; i++){
      if (softwarecapital[i][0] == stichprobecapital[a][0]){
        softwareindex.push(i);
      }
    }
    var softindexlen = softwareindex.length;
    for(var b = 0; b < softindexlen; b++) {
      var node =  document.createElement("LI"); 
      var textnode =  document.createTextNode(softwarecapital[0][1]);
      node.appendChild(textnode);
      document.getElementById("liste").appendChild(node); 

    }
    var htmlMessage = emailTemp.evaluate().getContent();
    GmailApp.sendEmail(stichprobecapital[a][2], subject, error,{name:name, htmlBody: htmlMessage, replyTo: replyto, cc: cc});
  }
}

我的 HTML 脚本：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <ul id="liste">
    </ul>
  </body>
</html>

问候

【问题讨论】：

标签： google-apps-script

【解决方案1】：

您正在尝试在服务器端代码中使用 HTML DOM Document 对象。导致错误的行是：

var node =  document.createElement("LI");

您不能在 Apps 脚本“.gs”文件中使用 HTML DOM 对象。您可以使用 Html 服务 - 带有 scriptlet 的模板化 HTML：

https://developers.google.com/apps-script/guides/html/templates

您无法在浏览器中为电子邮件构建 HTML，因为您没有加载 Web 应用程序、侧边栏或对话框。尽管 Apps Script 使用 JavaScript，但它与您在浏览器中使用的并不完全相同。而且 DOM 不是 JavaScript。 DOM 允许在浏览器中操作 HTML。

基本上，您需要使用文本连接为列表构建 HTML。

【讨论】：

【解决方案2】：

您在 Apps 脚本上使用 document javascript property。

了解 Apps 脚本不使用 DOM 模型运行很重要。

您要做的是在前端（您的 HTML 文件）上有一个函数从后端（Apps 脚本文件）调用数据并填充数据。

为此，您将在 HTML 文件中使用 client-side code 和 withSuccessHandler 来填充列表。这种处事方式符合best-practices。

【讨论】：