使用 Apps Script 操作 HtmlOutput 中的 html 内容答案

【问题标题】：Using Apps Script to manipulate the html content in HtmlOutput使用 Apps Script 操作 HtmlOutput 中的 html 内容
【发布时间】：2016-08-15 16:55:14
【问题描述】：

我正在使用Apps Script 并尝试在我的Google Sheet 中创建一个Sidebar，以显示将内容转换为JSON 的结果。

这是页面Sidebar的html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <!-- The CSS package above applies Google styling to buttons and other elements. -->
    <style>
      .width-100 {
        width: 100%;
        height: 100%
      }
    </style>
  </head>
  <body>
    <div class="sidebar branding-below">
      <form>
        <div class="block form-group">
          <label for="json"><b>JSON</b></label>
          <textarea class="width-100" id="json" name="json" rows="10"></textarea>
        </div>
      </form>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
  </body>
</html>

我之前创建了所需的JSON，现在尝试使用此方法将textarea 的内容设置为创建的JSON：

function displayText_(text) {
  var html = HtmlService.createHtmlOutputFromFile('Sidebar')
  .setTitle('JSON Results');
  var contents = html.getContent();
  contents.getElementById('json').setText(text);
  html.setContent(contents);
  SpreadsheetApp.getUi().showSidebar(html);
}

这是一个示例JSON 字符串，用于回答：

var jsonString = {"someKey":"someValue","anotherKey":"anotherValue"}

我尝试通过连接到html 和contents（我目前的方法）来使用getElementById。没有什么能产生预期的结果。我猜这很简单，但不知道如何从Apps Script 操作 html。

我很确定我可以在 Apps Script 中创建整个 html 内容并替换内容，但这是一种 hack 并且不容易维护。

有更简单的方法吗？

【问题讨论】：

标签： javascript html google-apps-script

【解决方案1】：

据我了解，您要实现的是从客户端的服务器端注入内容。函数displayText_ 是一个服务器端函数。
如果是这样，您可以将服务器端函数更改为可能看起来像这样的函数：（我们将使用模板文件而不是简单的客户端文件）

function displayText_(text) {
  var htmlTemplate = HtmlService.createTemplateFromFile('Sidebar');
  htmlTemplate.json = text;
  var html = htmlTemplate.evaluate().setTitle('JSON Results');
  SpreadsheetApp.getUi().showSidebar(html);
}

然后在客户端你需要改变

<textarea class="width-100" id="json" name="json" rows="10"></textarea>

为

  <textarea class="width-100" id="json" name="json" rows="10"><?!=json?></textarea>

如果你想有一个动态的变化那么你应该看看客户端/服务器通信过程here

【讨论】：

我认为这很容易。谢谢！
今天正在努力处理从现已弃用的uiapp 的转换，这完美地解决了我的问题（几乎完全相同的用例）。谢谢！