HTML 服务:创建和提供 HTML

借助 HTML 服务,您可以提供可与服务器端 Apps 脚本函数互动的网页。这对于在 Google 文档、表格和表单中构建 Web 应用或添加自定义界面尤其有用。您甚至可以使用它来生成电子邮件的正文。

创建 HTML 文件

要将 HTML 文件添加到您的 Apps 脚本项目中,请按以下步骤操作:

  1. 打开 Apps 脚本编辑器。
  2. 点击左侧的“添加文件” &gt HTML

在 HTML 文件中,您可以编写大多数标准的 HTML、CSS 和客户端 JavaScript。网页将作为 HTML5 提供,但 HTML5 的一些高级功能无法使用,如限制中所述。

该文件还可以包含模板网页,这些脚本在网页发送给用户之前会在服务器上进行处理(类似于 PHP),如模板化 HTML 中所述。

以 Web 应用的形式提供 HTML

要使用 HTML 服务创建 Web 应用,您的代码必须包含一个 doGet() 功能,告知脚本如何提供页面。如示例中所示,该函数必须返回一个 HtmlOutput 对象。

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

有了该基本框架后,您只需保存脚本的一个版本,然后将脚本部署为 Web 应用即可。

将脚本作为 Web 应用部署后,您还可以选择将其嵌入到 Google 网站中

以 Google 文档、表格、幻灯片或表单界面的形式提供 HTML

如果您的脚本与容器绑定,则 HTML 服务可以在 Google 文档、表格、幻灯片或表单中显示对话框或边栏。(在 Google 表单中,自定义界面仅对打开表单以修改表单的编辑者可见,而对打开表单进行回复的用户不可见。)

与 Web 应用不同,脚本可为文档、电子表格或表单创建界面,而无需专门使用 doGet() 函数,并且您无需保存脚本版本或部署脚本。相反,用于打开界面的函数必须将您的 HTML 文件作为 HtmlOutput 对象传递给有效文档、表单或电子表格的 Ui 对象的 showModalDialog())showSidebar() 方法。

为方便起见,这些示例包括一些额外的功能:onOpen() 函数会创建一个自定义菜单,便于您打开界面;HTML 文件中的按钮会调用 google.script.host API 的特殊 close() 方法,以关闭界面。

Code.gs

// Use this code for Google Docs, Slides, Forms, or Sheets.
function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Dialog')
      .addItem('Open', 'openDialog')
      .addToUi();
}

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'Dialog title');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
    <input type="button" value="Close"
        onclick="google.script.host.close()" />
  </body>
</html>

请注意,首次想要显示此界面时,您必须在脚本编辑器中手动运行 onOpen() 函数,或者为文档、表格或表单编辑器重新加载窗口(此操作将关闭脚本编辑器)。之后,您每次打开文件时,自定义菜单都应会在几秒钟内出现。选择对话框 > 打开以查看界面。