Hiển thị thanh tiến trình trong bản trình bày trên Google Trang trình bày
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.
Cấp độ viết mã: Trung cấp
Thời lượng: 15 phút
Loại dự án: Tiện ích bổ sung cho trình chỉnh sửa
Mục tiêu
- Tìm hiểu chức năng của giải pháp.
- Tìm hiểu chức năng của các dịch vụ Apps Script trong giải pháp.
- Thiết lập tập lệnh.
- Chạy tập lệnh.
Giới thiệu về giải pháp này
Hãy sử dụng giải pháp này để thêm một thanh tiến trình vào cuối các trang trình bày trong bản trình bày của bạn.

Cách hoạt động
Tập lệnh này tính toán số trang trình bày trong bản trình bày và thêm một hình chữ nhật vào cuối mỗi trang trình bày. Tập lệnh này tăng chiều rộng cho từng hình chữ nhật để cho biết tiến trình trong các trang trình bày.
Các dịch vụ của Apps Script
Giải pháp này sử dụng dịch vụ sau:
Điều kiện tiên quyết
Để sử dụng mẫu này, bạn cần đáp ứng các điều kiện tiên quyết sau:
- Một Tài khoản Google (tài khoản Google Workspace có thể yêu cầu quản trị viên phê duyệt).
- Một trình duyệt web có quyền truy cập vào Internet.
Thiết lập tập lệnh
- Nhấp vào nút sau để tạo bản sao của bản trình bày Thanh tiến trình. Dự án Apps Script cho giải pháp này được đính kèm vào bản trình bày.
Tạo bản sao
- Trong bản trình bày, hãy nhấp vào Tiện ích bổ sung
>
Thanh tiến trình >
Hiện thanh tiến trình.
Khi được nhắc, hãy cho phép tập lệnh chạy.
Nếu màn hình đồng ý OAuth hiển thị cảnh báo Ứng dụng này chưa được xác minh, hãy tiếp tục bằng cách chọn Nâng cao >
Chuyển đến {Tên dự án} (không an toàn).
Một lần nữa, hãy nhấp vào Tiện ích >
Thanh tiến trình > Hiện thanh tiến trình.
Để xoá thanh tiến trình, hãy nhấp vào Tiện ích
>
Thanh tiến trình > Ẩn thanh tiến trình.
Xem lại mã
Để xem lại mã Apps Script cho giải pháp này, hãy nhấp vào Xem mã nguồn bên dưới:
Người đóng góp
Mẫu này do Google duy trì với sự trợ giúp của các Chuyên gia Google về phát triển.
Các bước tiếp theo
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-07-25 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-07-25 UTC."],[[["\u003cp\u003eThis Google Apps Script solution adds a progress bar to the bottom of Google Slides presentations to visually track progress through the slides.\u003c/p\u003e\n"],["\u003cp\u003eThe script uses the Slides service to calculate the number of slides, add a rectangle shape to each slide, and dynamically adjust the rectangle's width to represent progress.\u003c/p\u003e\n"],["\u003cp\u003eUsers can easily install the script by making a copy of the provided presentation and authorizing the script to access their Google Slides.\u003c/p\u003e\n"],["\u003cp\u003eThe progress bar can be shown or hidden using the "Progress bar" menu found under "Extensions" in Google Slides after installation.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can review and modify the source code, which is publicly available on GitHub, for customization or further development.\u003c/p\u003e\n"]]],["This solution adds a progress bar to Google Slides presentations using Apps Script. The script calculates the total slides and adds a rectangle to the bottom of each slide, increasing the rectangle's width to visually represent progress. Users copy a sample presentation, authorize the script, and then run it to create or remove the progress bars via the \"Extensions\" menu. It utilizes the Slides service to manipulate slides and shapes, adding and deleting these elements.\n"],null,["# Show progress bars in a Google Slides presentation\n\n**Coding level** : Intermediate \n\n**Duration** : 15 minutes \n\n**Project type**: Editor add-on\n\nObjectives\n----------\n\n- Understand what the solution does.\n- Understand what the Apps Script services do within the solution.\n- Set up the script.\n- Run the script.\n\nAbout this solution\n-------------------\n\nUse this solution to add a progress bar to the bottom of the slides in\nyour presentation.\n\n### How it works\n\nThe script calculates how many slides are in the presentation and adds a\nrectangle shape to the bottom of each slide. The script increases the width for\neach rectangle shape to show progress within the slides.\n\n### Apps Script services\n\nThis solution uses the following service:\n\n- [Slides service](https://developers.google.com/apps-script/reference/slides)--Gets a presentation's slides and adds a rectangle shape to each one.\n\nPrerequisites\n-------------\n\nTo use this sample, you need the following prerequisites:\n\n- A Google Account (Google Workspace accounts might require administrator approval).\n- A web browser with access to the internet.\n\nSet up the script\n-----------------\n\n1. Click the following button to make a copy of the **Progress bar** Slides presentation. The Apps Script project for this solution is attached to the presentation. \n [Make a copy](https://docs.google.com/presentation/d/1wMwCeISpBgSal0K1K8qXPdr-MYZxkU_A-RobUIYZ8WU/copy)\n2. In the presentation, click **Extensions** \\\u003e **Progress bar** \\\u003e **Show progress bar**.\n3. When prompted, authorize the script.\n If the OAuth consent screen displays the warning, **This app isn't verified** ,\n continue by selecting **Advanced** \\\u003e\n **Go to {Project Name} (unsafe)**.\n\n4. Again, click **Extensions** \\\u003e\n **Progress bar** \\\u003e **Show progress bar**.\n\n5. To remove the progress bar, click **Extensions**\n \\\u003e\n **Progress bar** \\\u003e **Hide progress bar**.\n\nReview the code\n---------------\n\nTo review the Apps Script code for this solution, click\n**View source code** below: \n\n#### View source code\n\n\u003cbr /\u003e\n\nslides/progress/progress.gs \n[View on GitHub](https://github.com/googleworkspace/apps-script-samples/blob/main/slides/progress/progress.gs) \n\n```javascript\n/**\n * @OnlyCurrentDoc Adds progress bars to a presentation.\n */\nconst BAR_ID = 'PROGRESS_BAR_ID';\nconst BAR_HEIGHT = 10; // px\n\n/**\n * Runs when the add-on is installed.\n * @param {object} e The event parameter for a simple onInstall trigger. To\n * determine which authorization mode (ScriptApp.AuthMode) the trigger is\n * running in, inspect e.authMode. (In practice, onInstall triggers always\n * run in AuthMode.FULL, but onOpen triggers may be AuthMode.LIMITED or\n * AuthMode.NONE.)\n */\nfunction onInstall(e) {\n onOpen();\n}\n\n/**\n * Trigger for opening a presentation.\n * @param {object} e The onOpen event.\n */\nfunction onOpen(e) {\n SlidesApp.getUi().createAddonMenu()\n .addItem('Show progress bar', 'createBars')\n .addItem('Hide progress bar', 'deleteBars')\n .addToUi();\n}\n\n/**\n * Create a rectangle on every slide with different bar widths.\n */\nfunction createBars() {\n deleteBars(); // Delete any existing progress bars\n const presentation = SlidesApp.getActivePresentation();\n const slides = presentation.getSlides();\n for (let i = 0; i \u003c slides.length; ++i) {\n const ratioComplete = (i / (slides.length - 1));\n const x = 0;\n const y = presentation.getPageHeight() - BAR_HEIGHT;\n const barWidth = presentation.getPageWidth() * ratioComplete;\n if (barWidth \u003e 0) {\n const bar = slides[i].insertShape(SlidesApp.ShapeType.RECTANGLE, x, y,\n barWidth, BAR_HEIGHT);\n bar.getBorder().setTransparent();\n bar.setLinkUrl(BAR_ID);\n }\n }\n}\n\n/**\n * Deletes all progress bar rectangles.\n */\nfunction deleteBars() {\n const presentation = SlidesApp.getActivePresentation();\n const slides = presentation.getSlides();\n for (let i = 0; i \u003c slides.length; ++i) {\n const elements = slides[i].getPageElements();\n for (const el of elements) {\n if (el.getPageElementType() === SlidesApp.PageElementType.SHAPE &&\n el.asShape().getLink() &&\n el.asShape().getLink().getUrl() === BAR_ID) {\n el.remove();\n }\n }\n }\n}\n```\n\n\n\u003cbr /\u003e\n\nContributors\n------------\n\nThis sample is maintained by Google with the help of Google Developer Experts.\n\nNext steps\n----------\n\n- [Extending Google Slides with Apps Script](/apps-script/guides/slides)\n- [Slides service reference](/apps-script/reference/slides)"]]