Вставка слайдов в презентацию PowerPoint

  • Статья

Надстройка PowerPoint может вставлять слайды из одной презентации в текущую презентацию с помощью библиотеки JavaScript для приложений PowerPoint. Вы можете управлять тем, будут ли вставленные слайды сохранять форматирование исходной презентации или формат целевой презентации.

API-интерфейсы вставки слайдов в основном используются в сценариях шаблонов презентаций. Существует небольшое количество известных презентаций, которые служат пулами слайдов, которые могут быть вставлены надстройкой. В этом сценарии вы или клиент должны создать и обслуживать источник данных, который сопоставляет критерий выбора (например, заголовки слайдов или изображения) с идентификаторами слайдов. API-интерфейсы также можно использовать в сценариях, когда пользователь может вставлять слайды из любой произвольной презентации, но в этом сценарии пользователь фактически ограничивается вставлять все слайды из исходной презентации. Дополнительные сведения см. в разделе Выбор слайдов для вставки .

Вставка слайдов из одной презентации в другую выполняется двумя шагами.

  1. Преобразуйте исходный файл презентации (.pptx) в строку в формате Base64.
  2. Используйте метод , insertSlidesFromBase64 чтобы вставить один или несколько слайдов из файла Base64 в текущую презентацию.

Преобразование исходной презентации в base64

Существует множество способов преобразования файла в base64. Какой язык программирования и библиотека вы используете, а также следует ли преобразовать на стороне сервера надстройки или на стороне клиента, определяется вашим сценарием. Чаще всего преобразование выполняется в JavaScript на стороне клиента с помощью объекта FileReader . В следующем примере показана такая практика.

  1. Начните с получения ссылки на исходный файл PowerPoint. В этом примере мы будем использовать <input> элемент управления типа file , чтобы предложить пользователю выбрать файл. Добавьте следующую разметку на страницу надстройки.

    <section>
    <p>Select a PowerPoint presentation from which to insert slides</p>
    <form>
        <input type="file" id="file" />
    </form>
</section>

    Эта разметка добавляет пользовательский интерфейс на следующем снимке экрана на страницу.

    Элемент управления входными данными типа HTML-файла, перед которым стоит учебное предложение с надписью

    Примечание.

    Существует множество других способов получения файла PowerPoint. Например, если файл хранится в OneDrive или SharePoint, его можно скачать с помощью Microsoft Graph. Дополнительные сведения см. в разделах Работа с файлами в Microsoft Graph и Доступ к файлам с помощью Microsoft Graph.

  2. Добавьте следующий код в JavaScript надстройки, чтобы назначить функцию событию элемента управления входными данными change . (Вы создадите функцию storeFileAsBase64 на следующем шаге.)

    $("#file").on("change", storeFileAsBase64);

  3. Добавьте в него указанный ниже код. Обратите внимание на указанные ниже аспекты этого кода.

    • Метод reader.readAsDataURL преобразует файл в base64 и сохраняет его в свойстве reader.result . После завершения метода запускается onload обработчик событий.
    • Обработчик onload событий обрезает метаданные закодированного файла и сохраняет закодированную строку в глобальной переменной.
    • Строка в кодировке base64 хранится глобально, так как она будет считываться другой функцией, созданной позже.
    let chosenFileBase64;

async function storeFileAsBase64() {
    const reader = new FileReader();

    reader.onload = async (event) => {
        const startIndex = reader.result.toString().indexOf("base64,");
        const copyBase64 = reader.result.toString().substr(startIndex + 7);

        chosenFileBase64 = copyBase64;
    };

    const myFile = document.getElementById("file") as HTMLInputElement;
    reader.readAsDataURL(myFile.files[0]);
}

Вставка слайдов с помощью insertSlidesFromBase64

Ваша надстройка вставляет слайды из другой презентации PowerPoint в текущую презентацию с помощью метода Presentation.insertSlidesFromBase64 . Ниже приведен простой пример, в котором все слайды из исходной презентации вставляются в начале текущей презентации, а вставленные слайды сохраняют форматирование исходного файла. Обратите внимание, что chosenFileBase64 это глобальная переменная, которая содержит версию файла презентации PowerPoint в кодировке Base64.

async function insertAllSlides() {
  await PowerPoint.run(async function(context) {
    context.presentation.insertSlidesFromBase64(chosenFileBase64);
    await context.sync();
  });
}

Вы можете управлять некоторыми аспектами результата вставки, в том числе местом вставки слайдов и получением исходного или целевого форматирования путем передачи объекта InsertSlideOptions в качестве второго параметра в insertSlidesFromBase64. Ниже приведен пример. Вот что нужно знать об этом коде:

  • Существует два возможных значения для formatting свойства: UseDestinationTheme и KeepSourceFormatting. При необходимости можно использовать перечисление InsertSlideFormatting (например, PowerPoint.InsertSlideFormatting.useDestinationTheme).
  • Функция вставляет слайды из исходной презентации сразу после слайда, указанного свойством targetSlideId . Значение этого свойства представляет собой строку одной из трех возможных форм: nnn#, #mmmmmmmmm или nnn#mmmmmmmmm, где nnn — это идентификатор слайда (обычно 3 цифры), а mmmmmmmmm — идентификатор создания слайда (обычно 9 цифр). Некоторые примеры: 267#763315295, 267#и #763315295.
async function insertSlidesDestinationFormatting() {
  await PowerPoint.run(async function(context) {
    context.presentation
    .insertSlidesFromBase64(chosenFileBase64,
                            {
                                formatting: "UseDestinationTheme",
                                targetSlideId: "267#"
                            }
                          );
    await context.sync();
  });
}

Конечно, вы обычно не знаете во время написания кода идентификатор или идентификатор создания целевого слайда. Чаще всего надстройка просит пользователей выбрать целевой слайд. Ниже показано, как получить идентификатор nnn# выбранного слайда и использовать его в качестве целевого слайда.

  1. Создайте функцию, которая получает идентификатор выбранного в данный момент слайда с помощью метода Office.context.document.getSelectedDataAsync общих API JavaScript. Ниже приведен пример. Обратите внимание, что вызов getSelectedDataAsync встроен в функцию promise-returning. Дополнительные сведения о том, почему и как это сделать, см. в статье Перенос Common-APIs в функции возврата обещаний.

    function getSelectedSlideID() {
  return new OfficeExtension.Promise<string>(function (resolve, reject) {
    Office.context.document.getSelectedDataAsync(Office.CoercionType.SlideRange, function (asyncResult) {
      try {
        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
          reject(console.error(asyncResult.error.message));
        } else {
          resolve(asyncResult.value.slides[0].id);
        }
      }
      catch (error) {
        reject(console.log(error));
      }
    });
  })
}

  2. Вызовите новую функцию внутри PowerPoint.run() функции main и передайте возвращаемый ею идентификатор (сцепленный с символом "#") в качестве значения targetSlideId свойства InsertSlideOptions параметра. Ниже приведен пример.

    async function insertAfterSelectedSlide() {
    await PowerPoint.run(async function(context) {

        const selectedSlideID = await getSelectedSlideID();

        context.presentation.insertSlidesFromBase64(chosenFileBase64, {
            formatting: "UseDestinationTheme",
            targetSlideId: selectedSlideID + "#"
        });

        await context.sync();
    });
}

Выбор слайдов для вставки

Вы также можете использовать параметр InsertSlideOptions для управления вставленными слайдами из исходной презентации. Это можно сделать, назначив свойству массив идентификаторов слайдов исходной презентации sourceSlideIds . Ниже приведен пример вставки четырех слайдов. Обратите внимание, что каждая строка в массиве должна соответствовать одному или другому шаблону, используемому targetSlideId для свойства .

async function insertAfterSelectedSlide() {
    await PowerPoint.run(async function(context) {
        const selectedSlideID = await getSelectedSlideID();
        context.presentation.insertSlidesFromBase64(chosenFileBase64, {
            formatting: "UseDestinationTheme",
            targetSlideId: selectedSlideID + "#",
            sourceSlideIds: ["267#763315295", "256#", "#926310875", "1270#"]
        });

        await context.sync();
    });
}

Примечание.

Слайды будут вставляться в том же относительном порядке, в котором они отображаются в исходной презентации, независимо от того, в каком порядке они отображаются в массиве.

Практически невозможно найти идентификатор или идентификатор создания слайда в исходной презентации. По этой причине свойство действительно можно использовать sourceSlideIds только в том случае, если вы знаете идентификаторы источника во время написания кода или ваша надстройка может получить их во время выполнения из какого-либо источника данных. Так как нельзя ожидать, что пользователи будут запоминать идентификаторы слайдов, вам также нужно разрешить пользователю выбирать слайды, например по заголовку или по изображению, а затем сопоставлять каждое название или изображение с идентификатором слайда.

Соответственно, sourceSlideIds свойство в основном используется в сценариях шаблонов презентаций. Надстройка предназначена для работы с определенным набором презентаций, которые служат пулами слайдов, которые можно вставить. В таком сценарии вы или клиент должны создать и обслуживать источник данных, который сопоставляет критерий выбора (например, заголовки или изображения) с идентификаторами слайдов или идентификаторами создания слайдов, созданными на основе набора возможных исходных презентаций.