是否可以在 google 网络脚本中接收 Dom？

Question

我从 google sheet 收到一些要显示的 html 标签，但它显示为原始字符串。方法如下

Index.html

  <? var BlogData = getSheetData("Blogs"); ?>
  <? for(var i = 0; i < BlogData.length; i++) { ?>
        <div class="text-muted text-end"><?= BlogData[i][1] ?></div>
        <!-- BlogData[i][1] this should be dom but it displays as string -->
  <?};?>

code.gs

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

 function getSheetData(sheetName)  { 
    var ss= SpreadsheetApp.openById("1s5AHWsdfbsgfaegsdthwrthaert5ad4y4gt56355h");
    var dataSheet = ss.getSheetByName(sheetName); 
    var dataRange = dataSheet.getDataRange();
    var dataValues = dataRange.getValues();  

   return dataValues;
  }

值来自 sheet Blogs 看起来像这样

A	B
`<h1>Title </h1>`
`<h2>Subtitle</h2>`
`<p>Paragraph</p>`

不幸的是，它在 Index.html 中显示为字符串

我需要将其显示为 DOM 而不是字符串

Answer 1

终于，我找到了解决方案。

使用 google 插值标签有点棘手，我不知道这些标签的类型。但无意中我找到了解决方案。

使用 <?= blogData[i][j] ?> 将 return html 标记原样。

然而，<?!= blogData[i][j] ?> 将 return html 格式。

使用感叹号会完全改变结果。

Answer 2

我将把这个作为 devoloper 正在做的事情的例子：

他创建了一个部署，因此您可以从电子表格中检索 HTML 标签，如下所示：

现在的问题是部署将结果显示为原始文本：

通过使用 App Script 提供的 HTML SCriptlets，您可以通过脚本传递值来 return 电子表格中的数据。像这样：

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>
  <div class="root">
    <? const blogData = getSheetData("Blogs");?>
    <div>
      <? for(var i = 0; i < blogData.length; i++) { ?>
      <div>
        <? for (var j = 0; j < blogData[i].length; j++) { ?>
        <div>
          <?!= blogData[i][j] ?> // This is the solution that devoloper found
        </div>
        <?};?>
      </div>
      <?};?>

    </div>
  </div>
</body>

</html>

function doGet(e) {
  return HtmlService
    .createTemplateFromFile("index")
    .evaluate()
}


function getSheetData(sheetName) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName('Blogs');
  var dataRange = dataSheet.getDataRange()
  var dataValues = dataRange.getValues();
  console.log(dataValues)

  return dataValues;
}

一旦上述脚本运行添加到电子表格的 HTML tags 将 return 作为常规 HTML DOM:

是否可以在 google 网络脚本中接收 Dom？

is it possible to receive Dom in google webscript?

javascript

google-apps-script

google-sheets

web-scripting