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 cấp
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õ mục đích của giải pháp.
  • Hiểu được chức năng của các dịch vụ Apps Script trong giải pháp này.
  • 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 các trang trình bày trong bản trình bày.

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

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

Tập lệnh sẽ tính toán số lượng trang trình bày có 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 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:

  • Dịch vụ Trang trình bày – Lấy các trang trình bày của một bản trình bày và thêm một hình chữ nhật cho mỗi trang.

Đ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 (các tài khoản Google Workspace có thể phải được quản trị viên phê duyệt).
  • Một trình duyệt web có kết nối Internet.

Thiết lập tập lệnh

  1. Hãy nhấp vào nút sau đây để tạo bản sao của bản trình bày Thanh tiến trình trên Trang trình bày. 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 thanh tiến trình.
  3. Khi được nhắc, hãy cho phép tập lệnh chạy. 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, hãy tiếp tục bằng cách chọn Nâng cao > Chuyển đến {Project Name} (không an toàn).

  4. Một lần nữa, hãy nhấp vào Tiện ích > Thanh tiến trình > Hiển thị thanh tiến trình.

  5. Để xoá thanh tiến trình, hãy nhấp vào mục Tiện ích > Thanh tiến trình > Ẩn thanh tiến trình.

Xem xét 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

trang trình bày/tiến trình/tiến trình.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 do Google duy trì với sự trợ giúp của các chuyên gia nhà phát triển của Google.

Các bước tiếp theo