Hiển thị thanh tiến trình trong bản trình bày trên Google Trang trình bày

Cấp độ lập trình: Trung bình
Thời lượng: 15 phút
Loại dự án: Tiện ích bổ sung dành cho trình chỉnh sửa

Mục tiêu

  • Hiểu rõ 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 thanh tiến trình vào cuối trang trình bày trong bản trình bày của bạn.

Ảnh chụp màn hình Tiện ích bổ sung Trình chỉnh sửa Trang trình bày trong thanh tiến trình

Cách thức hoạt động

Tập lệnh tính toán số lượng trang trình bày có trong bản trình bày và thêm hình dạng hình chữ nhật ở cuối mỗi trang trình bày. Tập lệnh tăng chiều rộng cho từng hình chữ nhật để hiển thị tiến trình trong các trang trình bày.

Dịch vụ 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 có các điều kiện tiên quyết sau:

  • 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

  1. 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
  2. Trong bản trình bày, hãy nhấp vào Tiện ích > Thanh tiến trình > Hiển thị thanh tiến trình.

  3. Khi được nhắc, hãy cho phép tập lệnh. Nếu màn hình xin phép bằng OAuth hiển thị cảnh báo Ứng dụng này chưa được xác minh, 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).

  4. Nhấp lại vào Tiện ích > Thanh tiến trình > Hiển thị thanh tiến trình.

  5. Để xóa thanh tiến trình, hãy nhấp vào mục Phần mở rộng > 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:

Xem mã nguồn

Slides/progress/progress.gs
/**
 * @OnlyCurrentDoc Adds progress bars to a presentation.
 */
const BAR_ID = 'PROGRESS_BAR_ID';
const BAR_HEIGHT = 10; // px

/**
 * Runs when the add-on is installed.
 * @param {object} e The event parameter for a simple onInstall trigger. To
 *     determine which authorization mode (ScriptApp.AuthMode) the trigger is
 *     running in, inspect e.authMode. (In practice, onInstall triggers always
 *     run in AuthMode.FULL, but onOpen triggers may be AuthMode.LIMITED or
 *     AuthMode.NONE.)
 */
function onInstall(e) {
  onOpen();
}

/**
 * Trigger for opening a presentation.
 * @param {object} e The onOpen event.
 */
function onOpen(e) {
  SlidesApp.getUi().createAddonMenu()
      .addItem('Show progress bar', 'createBars')
      .addItem('Hide progress bar', 'deleteBars')
      .addToUi();
}

/**
 * Create a rectangle on every slide with different bar widths.
 */
function createBars() {
  deleteBars(); // Delete any existing progress bars
  const presentation = SlidesApp.getActivePresentation();
  const slides = presentation.getSlides();
  for (let i = 0; i < slides.length; ++i) {
    const ratioComplete = (i / (slides.length - 1));
    const x = 0;
    const y = presentation.getPageHeight() - BAR_HEIGHT;
    const barWidth = presentation.getPageWidth() * ratioComplete;
    if (barWidth > 0) {
      const bar = slides[i].insertShape(SlidesApp.ShapeType.RECTANGLE, x, y,
          barWidth, BAR_HEIGHT);
      bar.getBorder().setTransparent();
      bar.setLinkUrl(BAR_ID);
    }
  }
}

/**
 * Deletes all progress bar rectangles.
 */
function deleteBars() {
  const presentation = SlidesApp.getActivePresentation();
  const slides = presentation.getSlides();
  for (let i = 0; i < slides.length; ++i) {
    const elements = slides[i].getPageElements();
    for (const el of elements) {
      if (el.getPageElementType() === SlidesApp.PageElementType.SHAPE &&
        el.asShape().getLink() &&
        el.asShape().getLink().getUrl() === BAR_ID) {
        el.remove();
      }
    }
  }
}

Người đóng góp

Mẫu này được Google duy trì với sự trợ giúp của các Chuyên gia dành cho nhà phát triển của Google.

Các bước tiếp theo