HTML 服務:建立及提供 HTML

HTML 服務可讓您提供 可與伺服器端 Apps Script 函式互動。這就特別有用 可讓您在 Google 文件、Google 試算表、Google 文件 和表單也可以用來產生電子郵件內文。

建立 HTML 檔案

如要在 Apps Script 專案中加入 HTML 檔案,請按照下列步驟操作:

  1. 開啟 Apps Script 編輯器。
  2. 按一下左側的「新增檔案」圖示 >HTML

在 HTML 檔案中,您可以撰寫大部分的標準 HTML、CSS 和用戶端 JavaScript。這個頁面將以 HTML5 格式放送,但其中有一些進階功能 以下將說明 HTML5 無法使用,詳情請參閱 限制

檔案也可以加入伺服器中處理的範本指令碼 這點與 PHP 類似,如 範本 HTML 一節。

以網頁應用程式形式提供 HTML

如要使用 HTML 服務建立網頁應用程式,您的程式碼必須包含 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>

基本架構備妥後 儲存指令碼版本,然後 將指令碼部署為網頁應用程式

將指令碼部署為網頁應用程式後,您也可以 嵌入 Google 協作平台網站

以 Google 文件、試算表、簡報或表單使用者介面提供 HTML

HTML 服務可以顯示對話方塊或側欄 Google 文件、試算表、簡報或表單中,如果您的指令碼是 「容器繫結」。(在 Google 表單中, 只有開啟表單的編輯者才能看到自訂使用者介面 而不是只對開啟表單回覆的使用者進行修改)。

有別於網頁應用程式,指令碼可以為文件建立使用者介面 試算表或表單也不需要專門有 doGet() 函式。您同樣可以 就不需要儲存或部署指令碼版本取而代之 開啟使用者介面後,必須將 HTML 檔案以 HtmlOutput 物件傳遞至 showModalDialog())showSidebar() 方法的 Ui 物件 (適用於使用中的文件、表單,或 試算表。

這些例子包括幾項方便使用的額外功能:onOpen() 函式可建立自訂選單, 介面開啟介面,而 HTML 檔案中的按鈕會叫用 close() 方法 google.script.host API 即可關閉 存取 API

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 文件、試算表或表單編輯器的視窗 (這會關閉 指令碼編輯器)。自訂選單應該會在幾秒內顯示 每次開啟檔案時選擇「對話方塊」>開啟即可查看 存取 API