在 Google 幻灯片演示文稿中显示进度条

编码级别:中级
时长:15 分钟
项目类型:编辑器插件

目标

  • 了解解决方案的用途。
  • 了解 Apps 脚本服务在解决方案中的作用。
  • 设置脚本。
  • 运行脚本。

关于此解决方案

使用此解决方案在演示文稿的幻灯片底部添加进度条。

幻灯片编辑器插件进度条的屏幕截图

运作方式

该脚本会计算演示文稿中的幻灯片数量,并在每张幻灯片底部添加一个矩形。脚本会增大每个矩形的宽度,以显示幻灯片中的进度。

Apps 脚本服务

此解决方案使用以下服务:

  • 幻灯片服务 - 获取演示文稿的幻灯片,并为每个幻灯片添加矩形。

前提条件

如需使用此示例,您需要满足以下前提条件:

  • Google 帐号(Google Workspace 帐号可能需要管理员批准)。
  • 一个能够访问互联网的网络浏览器。

设置脚本

  1. 点击以下按钮创建进度条幻灯片演示文稿的副本。此解决方案的 Apps 脚本项目已附加到演示文稿中。
    复制
  2. 在演示文稿中,依次点击扩展程序 > 进度条 > 显示进度条
  3. 出现提示时,为脚本授权。 如果 OAuth 同意屏幕显示 This app is not verify 警告,请依次选择 Advanced > Go to {Project Name} (unsafe),以继续操作。

  4. 再次依次点击扩展程序 > 进度条 > 显示进度条

  5. 如需移除进度条,请依次点击扩展程序 > 进度条 > 隐藏进度条

查看代码

要查看此解决方案的 Apps 脚本代码,请点击下面的查看源代码

查看源代码

幻灯片/进度/进度.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();
      }
    }
  }
}

贡献者

此示例由 Google 在 Google 开发者专家的帮助下进行维护。

后续步骤