HTML 服务：创建和提供 HTML

借助 HTML 服务，您可以投放可与服务器端 Apps 脚本函数交互的网页 。此服务特别适合用于构建 Web 应用，或在 Google 文档、Google 表格和 Google 表单中添加自定义界面。您甚至可以使用此服务生成电子邮件正文。

创建 HTML 文件

如需将 HTML 文件添加到您的 Apps 脚本项目，请按以下步骤操作：

  1. 打开 Apps 脚本编辑器。
  2. 在左侧，依次点击“添加文件”图标 > HTML 。

在 HTML 文件中，您可以编写大多数标准 HTML、CSS 和客户端 JavaScript。该网页以 HTML5 格式投放，但 HTML5 的某些高级功能不可用，如 限制中所述。

您的文件还可以包含在网页发送给用户之前在服务器上处理的模板脚本（类似于 PHP），如 模板化 HTML部分中所述。

将 HTML 作为 Web 应用投放

如需使用 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 协作平台中。

将 HTML 作为 Google 文档、Google 表格、Google 幻灯片或 Google 表单界面投放

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

与 Web 应用不同，为文档、电子表格或表单创建界面的脚本不需要特定的 doGet 函数，您也不需要保存脚本的版本或部署脚本。相反，打开界面的函数必须将您的 HTML 文件作为 HtmlOutput对象传递给活动文档、表单或 电子表格的 Ui对象的 showModalDialog或showSidebar方法。

这些示例包含一些额外的便利功能：onOpen 函数会创建一个自定义菜单，帮助您 打开界面；HTML 文件中的按钮会调用 google.script.host.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 函数 或重新加载 Google 文档、Google 表格或 Google 表单编辑器的窗口（这会关闭 脚本编辑器）。之后，每次打开文件时，自定义菜单都会在几秒钟内显示。如需查看界面，请依次选择对话框 > 打开 。