在谷歌工作表中嵌入html

时间:2015-01-05 20:08:56

标签: google-apps-script google-sheets

我想在电子表格的顶部显示HTML,方法是创建一个html元素并将其放在电子表格的顶部。

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

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

我注意到在脚本编辑器中你可以去文件&gt;新&gt; html文件。

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

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

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

Cabbages是一个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

1 个答案:

答案 0 :(得分:5)

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

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

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');
}

的index.html

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