google-apps-script - 在谷歌表中嵌入 html

Question

我想通过创建一个 html 元素并将其放在电子表格工作表的顶部，在电子表格的顶部显示 HTML。

例如，如果我通过合并 A1:G5 在我的工作表顶部创建一个大单元格，是否可以在其中嵌入 html:

<div>
 <h1>"Hello World"?</h1>
</div>

我注意到在脚本编辑器中，您可以转到文件 > 新建 > html 文件。

但我真的不明白它的目的。

我刚试过这个:
从脚本编辑器新脚本:

function addSomeHTML() {
  var html = HtmlService.createHtmlOutputFromFile('cabbages')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

卷心菜是一个 html 文件:

<div>
  <h1>Hello, world!</h1>
</div>

然后我保存并导航到我的工作表。我选择了一个单元格并输入 =addSomeHTML()
出现“正在加载”消息，然后显示一个空单元格。我希望看到“Hello World!”细胞内。

我查看了以下文档:

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

https://developers.google.com/apps-script/guides/dialogs

Answer 1

您可以使用模态对话框或无模态对话框。

模态对话框使用 showModalDialog() Ui 类的方法。

Guide to Dialogs

Google Documentation - Modal Dialog

向电子表格添加自定义菜单

// This will run when the spreadsheet is opened or the browser page is refreshed
function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu('Custom Menu')
      .addItem('Open Dialog Box', 'openDialog')
      .addToUi();
}

创建从菜单运行的函数

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('index');

  SpreadsheetApp.getUi()
    .showModalDialog(html, 'Correct Postcode Errors');
}

索引.html

<div>
 <h1>"Hello World"?</h1>
</div>