Поделиться через

Надстройки PowerPoint

С помощью надстроек PowerPoint можно создавать удобные решения, подходящие для использования в презентациях на различных платформах, таких как Windows, iPad, Mac и браузеры. Можно создать два типа надстроек PowerPoint:

  • Надстройки области задач позволяют добавлять справочные сведения или данные в презентацию с помощью службы. Например, используя надстройку Pexels - Free Stock Photos, вы можете вставить профессиональные фотографии в свою презентацию. Чтобы создать собственную надстройку области задач, можно начать с создания первой надстройки области задач PowerPoint.

  • Контентные надстройки позволяют добавлять динамический контент HTML5 в презентации. Например, см. надстройку LucidChart Diagrams for PowerPoint , которая внедряет интерактивные схемы из LucidChart в презентацию. Чтобы создать собственную контентную надстройку, начните с создания первой контентной надстройки PowerPoint.

Сценарии надстроек PowerPoint

Примеры кода в этой статье демонстрируют некоторые основные задачи, которые могут быть полезны при разработке надстроек для PowerPoint.

Добавьте новый слайд, а затем перейдите к нему

В следующем примере кода функция вызывает метод SlideCollection.add для addAndNavigateToNewSlide добавления нового слайда в презентацию. Затем функция вызывает метод Presentation.setSelectedSlides для перехода к новому слайду.

async function addAndNavigateToNewSlide() {
  // Adds a new slide then navigates to it.
  await PowerPoint.run(async (context) => {
    const slideCountResult = context.presentation.slides.getCount();
    context.presentation.slides.add();
    await context.sync();

    const newSlide = context.presentation.slides.getItemAt(slideCountResult.value);
    newSlide.load("id");
    await context.sync();

    console.log(`Added slide - ID: ${newSlide.id}`);

    // Navigate to the new slide.
    context.presentation.setSelectedSlides([newSlide.id]);
    await context.sync();
  });
}

В следующем примере кода функция вызывает метод Presentation.getSelectedSlides, getSelectedSlides чтобы получить выбранные слайды, а затем регистрирует их идентификаторы. Затем функция может действовать на текущем слайде (или первом слайде из выделенного фрагмента).

async function getSelectedSlides() {
  // Gets the ID of the current slide (or selected slides).
  await PowerPoint.run(async (context) => {
    const selectedSlides = context.presentation.getSelectedSlides();
    selectedSlides.load("items/id");
    await context.sync();

    if (selectedSlides.items.length === 0) {
      console.warn("No slides were selected.");
      return;
    }

    console.log("IDs of selected slides:");
    selectedSlides.items.forEach(item => {
      console.log(item.id);
    });

    // Navigate to first selected slide.
    const currentSlide = selectedSlides.items[0];
    console.log(`Navigating to slide with ID ${currentSlide.id} ...`);
    context.presentation.setSelectedSlides([currentSlide.id]);

    // Perform actions on current slide...
  });
}

В следующем примере goToSlideByIndex кода функция вызывает Presentation.setSelectedSlides метод для перехода к первому слайду презентации с индексом 0. Максимальный индекс слайда, к который можно перейти в этом примере, — slideCountResult.value - 1.

async function goToSlideByIndex() {
  await PowerPoint.run(async (context) => {
    // Gets the number of slides in the presentation.
    const slideCountResult = context.presentation.slides.getCount();
    await context.sync();

    if (slideCountResult.value === 0) {
      console.warn("There are no slides.");
      return;
    }

    const slide = context.presentation.slides.getItemAt(0); // First slide
    //const slide = context.presentation.slides.getItemAt(slideCountResult.value - 1); // Last slide
    slide.load("id");
    await context.sync();

    console.log(`Slide ID: ${slide.id}`);

    // Navigate to the slide.
    context.presentation.setSelectedSlides([slide.id]);
    await context.sync();
  });
}

Получение URL-адреса презентации

В следующем примере кода функция вызывает метод Document.getFileProperties, getFileUrl чтобы получить URL-адрес файла презентации.

function getFileUrl() {
  // Gets the URL of the current file.
  Office.context.document.getFilePropertiesAsync(function (asyncResult) {
    const fileUrl = asyncResult.value.url;
    if (fileUrl === "") {
      console.warn("The file hasn't been saved yet. Save the file and try again.");
    } else {
      console.log(`File URL: ${fileUrl}`);
    }
  });
}

Создание презентации

Ваша надстройка может создать новую презентацию, отдельную от экземпляра PowerPoint, в котором в настоящее время работает надстройка. Для этой цели в пространстве имен PowerPoint есть метод createPresentation. При вызове этого метода сразу открывается и отображается новая презентация в новом экземпляре программы PowerPoint. Ваша надстройка остается открытой и запущенной в предыдущей презентации.

PowerPoint.createPresentation();

С помощью метода createPresentation также можно создать копию существующей презентации. Метод принимает строковое представление файла .pptx в кодировке Base64 в качестве необязательного параметра. Полученная презентация будет копией этого файла, предполагая, что строковый аргумент является допустимым PPTX-файлом. Класс FileReader можно использовать для преобразования файла в требуемую строку в кодировке Base64, как показано в следующем примере.

const myFile = document.getElementById("file") as HTMLInputElement;
const reader = new FileReader();

reader.onload = function (event) {
    // Strip off the metadata before the Base64-encoded string.
    const startIndex = reader.result.toString().indexOf("base64,");
    const copyBase64 = reader.result.toString().substr(startIndex + 7);

    PowerPoint.createPresentation(copyBase64);
};

// Read in the file as a data URL so we can parse the Base64-encoded string.
reader.readAsDataURL(myFile.files[0]);

Полный пример кода, включающий реализацию HTML, см. в разделе Создание презентации.

Определение активного представления презентации и обработка события ActiveViewChanged

При создании контентной надстройки необходимо получить активное представление презентации и обработать событие Document.ActiveViewChanged в рамках вызова Office.onReady .

Примечание.

В PowerPoint в Интернете событие никогда не сработает, Document.ActiveViewChanged так как режим слайд-шоу обрабатывается как новый сеанс. В этом случае надстройке необходимо получить активное представление по загрузке, как показано в примере кода ниже.

Обратите внимание на следующее о примере кода:

  • Функция getActiveFileView вызывает метод Document.getActiveViewAsync , чтобы определить, является ли текущее представление презентации "edit" (любое представление, в котором можно редактировать слайды, например Обычный, Сортировщик слайдов или Структура) или "Чтение" (слайд-шоу или режим чтения), представленные перечислением ActiveView .
  • Функция registerActiveViewChanged вызывает метод Document.addHandlerAsync для регистрации обработчика Document.ActiveViewChanged для события.
  • Для отображения сведений showNotification в этом примере используется функция , которая входит в шаблоны проектов надстроек Visual Studio Office. Если вы не используете Visual Studio для разработки надстройки, необходимо заменить функцию showNotification собственным кодом.
// General Office.onReady function. Called after the add-in loads and Office JS is initialized.
Office.onReady(() => {
  // Get whether the current view is edit or read.
  const currentView = getActiveFileView();

  // Register the active view changed handler.
  registerActiveViewChanged();

  // Render the content based off of the current view.
  if (currentView === Office.ActiveView.Read) {
      // Handle read view.
      console.log('Current view is read.');
      // You can add any specific logic for the read view here.
  } else {
      // Handle edit view.
      console.log('Current view is edit.');
      // You can add any specific logic for the edit view here.
  }
});

// Gets the active file view.
function getActiveFileView() {
    console.log('Getting active file view...');
    Office.context.document.getActiveViewAsync(function (result) {
        if (result.status === Office.AsyncResultStatus.Succeeded) {
            console.log('Active view:', result.value);
            return result.value;
        } else {
            console.error('Error getting active view:', result.error.message);
            showNotification('Error:', result.error.message);
            return null;
        }
    });
}

// Registers the ActiveViewChanged event.
function registerActiveViewChanged() {
    console.log('Registering ActiveViewChanged event handler...');
    Office.context.document.addHandlerAsync(
        Office.EventType.ActiveViewChanged,
        activeViewHandler,
        function (result) {
            if (result.status === Office.AsyncResultStatus.Failed) {
                console.error('Failed to register active view changed handler:', result.error.message);
                showNotification('Error:', result.error.message);
            } else {
                console.log('Active view changed handler registered successfully.');
            }
        });
}

// ActiveViewChanged event handler.
function activeViewHandler(eventArgs) {
    console.log('Active view changed:', JSON.stringify(eventArgs));
    showNotification('Active view changed', `The active view has changed to: ${eventArgs.activeView}`);
    // You can add logic here based on the new active view.
}

См. также