Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Dịch vụ HTML cho phép bạn phân phát các trang web có thể tương tác với các hàm Apps Script phía máy chủ. Đây là một công cụ đặc biệt hữu ích để tạo các ứng dụng web hoặc thêm giao diện người dùng tuỳ chỉnh trong Google Tài liệu, Trang tính và Biểu mẫu. Bạn thậm chí có thể dùng tính năng này để tạo nội dung email.
Tạo tệp HTML
Để thêm một tệp HTML vào dự án Apps Script, hãy làm theo các bước sau:
Mở trình chỉnh sửa Apps Script.
Ở bên trái, hãy nhấp vào biểu tượng Thêm tệp add > HTML.
Trong tệp HTML, bạn có thể viết hầu hết HTML, CSS và JavaScript phía máy khách tiêu chuẩn. Trang này sẽ được phân phát dưới dạng HTML5, mặc dù một số tính năng nâng cao của HTML5 không có sẵn, như đã giải thích trong phần Các hạn chế.
Tệp của bạn cũng có thể bao gồm các tập lệnh mẫu được xử lý trên máy chủ trước khi trang được gửi đến người dùng (tương tự như PHP), như được giải thích trong phần về HTML dựa trên mẫu.
Phân phát HTML dưới dạng ứng dụng web
Để tạo một ứng dụng web bằng dịch vụ HTML, mã của bạn phải bao gồm một hàm doGet() cho biết cách tập lệnh phân phát trang. Hàm này phải trả về một đối tượng HtmlOutput, như minh hoạ trong ví dụ này.
Code.gs
function doGet() { return HtmlService.createHtmlOutputFromFile('Index'); }
Phân phát HTML dưới dạng giao diện người dùng Google Tài liệu, Trang tính, Trang trình bày hoặc Biểu mẫu
Dịch vụ HTML có thể hiển thị một hộp thoại hoặc thanh bên trong Google Tài liệu, Trang tính, Trang trình bày hoặc Biểu mẫu nếu tập lệnh của bạn được liên kết với vùng chứa của tệp. (Trong Google Biểu mẫu, chỉ những người chỉnh sửa mở biểu mẫu để sửa đổi mới nhìn thấy giao diện người dùng tuỳ chỉnh, chứ không phải người dùng mở biểu mẫu để trả lời.)
Không giống như ứng dụng web, tập lệnh tạo giao diện người dùng cho tài liệu, bảng tính hoặc biểu mẫu không cần có hàm doGet() cụ thể và bạn không cần lưu phiên bản tập lệnh hoặc triển khai tập lệnh. Thay vào đó, hàm mở giao diện người dùng phải truyền tệp HTML của bạn dưới dạng đối tượng HtmlOutput đến các phương thức showModalDialog()) hoặc showSidebar() của đối tượng Ui cho tài liệu, biểu mẫu hoặc bảng tính đang hoạt động.
Các ví dụ này bao gồm một số tính năng bổ sung để thuận tiện: hàm onOpen() tạo trình đơn tuỳ chỉnh giúp bạn dễ dàng mở giao diện và nút trong tệp HTML sẽ gọi một phương thức close() đặc biệt của API google.script.host để đóng giao diện.
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'); }
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-08-04 UTC."],[[["\u003cp\u003eThe HTML service allows you to create web pages that interact with Apps Script functions, enabling you to build web apps or add custom interfaces to Google Docs, Sheets, and Forms.\u003c/p\u003e\n"],["\u003cp\u003eYou can build HTML files within your Apps Script project using standard HTML, CSS, and client-side JavaScript, enhancing the functionality of your applications.\u003c/p\u003e\n"],["\u003cp\u003eDeploying your script as a web app allows external access, or it can be embedded in a Google Site for integration with your existing web presence.\u003c/p\u003e\n"],["\u003cp\u003eFor Google Docs, Sheets, Slides, or Forms, the HTML service enables the creation of custom dialogs or sidebars, providing interactive elements within these applications.\u003c/p\u003e\n"],["\u003cp\u003eContainer-bound scripts can display user interfaces using the HTML service by invoking \u003ccode\u003eshowModalDialog()\u003c/code\u003e or \u003ccode\u003eshowSidebar()\u003c/code\u003e methods, offering a tailored user experience.\u003c/p\u003e\n"]]],[],null,["The [HTML service](/apps-script/reference/html) lets you serve web pages that\ncan interact with server-side Apps Script functions. It is particularly useful\nfor building web apps or adding custom user interfaces in Google Docs, Sheets,\nand Forms. You can even use it to generate the body of an email.\n\nCreate HTML files\n\nTo add an HTML file to your Apps Script project, follow these steps:\n\n1. Open the Apps Script editor.\n2. At the left, click Add a file add \\\u003e **HTML**.\n\nWithin the HTML file, you can write most standard HTML, CSS, and client-side\nJavaScript. The page will be served as HTML5, although some advanced features of\nHTML5 are not available, as explained in\n[Restrictions](/apps-script/guides/html/restrictions).\n\nYour file can also include template scriptlets that are processed on the server\nbefore the page is sent to the user --- similar to PHP --- as explained in the\nsection on [templated HTML](/apps-script/guides/html/templates).\n\nServe HTML as a web app\n\nTo create a web app with the HTML service, your code must include a `doGet()`\nfunction that tells the script how to serve the page. The function must return\nan [`HtmlOutput`](/apps-script/reference/html/html-output) object, as shown in\nthis example. \n\nCode.gs \n\n```html\nfunction doGet() {\n return HtmlService.createHtmlOutputFromFile('Index');\n}\n```\n\nIndex.html \n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n \u003chead\u003e\n \u003cbase target=\"_top\"\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n Hello, World!\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\nOnce that basic framework is in place, all you have to do is\n[save a version of your script](/apps-script/guides/versions), then\n[deploy your script as a web app](/apps-script/execution_web_apps#deploying).\n\nAfter the script is deployed as a web app, you can also\n[embed it in a Google Site](/apps-script/guides/web#embed_your_web_app_in).\n\nServe HTML as a Google Docs, Sheets, Slides, or Forms user interface\n\nThe HTML service can display a [dialog or sidebar](/apps-script/guides/dialogs)\nin Google Docs, Sheets, Slides, or Forms if your script is\n[container-bound](/apps-script/guides/bound) to the file. (In Google Forms,\ncustom user interfaces are only visible to an editor who opens the form to\nmodify it, not to a user who opens the form to respond.)\n\nUnlike a web app, a script that creates a user interface for a document,\nspreadsheet, or form does not need a `doGet()` function specifically, and you do\nnot need to save a version of your script or deploy it. Instead, the function\nthat opens the user interface must pass your HTML file as an\n[`HtmlOutput`](/apps-script/reference/html/html-output) object to the\n`showModalDialog())` or `showSidebar()` methods of the\n[`Ui`](/apps-script/reference/base/ui) object for the active document, form, or\nspreadsheet.\n\nThese examples include a few extra features for convenience: the `onOpen()`\nfunction creates a [custom menu](/apps-script/guides/menus) that makes it easy\nto open the interface, and the button in the HTML file invokes a special\n`close()` method of the\n[`google.script.host`](/apps-script/guides/html/communication) API to close the\ninterface. \n\nCode.gs \n\n```html\n// Use this code for Google Docs, Slides, Forms, or Sheets.\nfunction onOpen() {\n SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.\n .createMenu('Dialog')\n .addItem('Open', 'openDialog')\n .addToUi();\n}\n\nfunction openDialog() {\n var html = HtmlService.createHtmlOutputFromFile('Index');\n SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.\n .showModalDialog(html, 'Dialog title');\n}\n```\n\nIndex.html \n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n \u003chead\u003e\n \u003cbase target=\"_top\"\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n Hello, World!\n \u003cinput type=\"button\" value=\"Close\"\n onclick=\"google.script.host.close()\" /\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\nNote that the first time you want to display this user interface, you must\neither run the `onOpen()` function\n[manually in the script editor](/apps-script/execution_script_editor)\nor reload the window for the Docs, Sheets, or Forms editor (which will close the\nscript editor). After that, the custom menu should appear within a few seconds\nevery time you open the file. Choose **Dialog \\\u003e Open** to see the\ninterface."]]
