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

Создание первой контентной надстройки PowerPoint

  • Статья

В этой статье описан процесс создания контентной надстройки PowerPoint с помощью Visual Studio.

Предварительные условия

  • Visual Studio 2019 или более поздней версии с установленной рабочей нагрузкой Разработка надстроек для Office и SharePoint.

    Примечание.

    Если вы уже установили Visual Studio, используйте установщик Visual Studio, чтобы убедиться, что также установлена рабочая нагрузка Разработка надстроек для Office и SharePoint.

  • Пакет Office, подключенный к подписке Microsoft 365 (включая Office в Интернете).

Создание проекта надстройки

  1. В Visual Studio выберите пункт Создать проект.

  2. Используя поле поиска, введите надстройка. Выберите вариант Веб-надстройка PowerPoint и нажмите кнопку Далее.

  3. Присвойте проекту имя и нажмите кнопку Создать.

  4. В диалоговом окне Создание надстройки Office выберите Вставить содержимое на слайды PowerPoint, а затем нажмите кнопку Готово , чтобы создать проект.

  5. Visual Studio создаст решение, и два соответствующих проекта появятся в обозревателе решений. В Visual Studio откроется файл Home.html.

Обзор решения Visual Studio

После завершения работы мастера Visual Studio создает решение, которое содержит два проекта.

Project Описание
Проект надстройки Содержит только файл манифеста надстройки в формате XML, который содержит все параметры, описывающие надстройку. Эти параметры помогают приложению Office определить условия активации и место отображения надстройки. Visual Studio создает этот файл автоматически, чтобы вы могли сразу запускать проект и использовать надстройку. Измените эти параметры в любое время, изменив XML-файл.
Проект веб-приложения Содержит страницы контента надстройки, включающие все файлы и ссылки на файлы, необходимые для разработки страниц HTML и JavaScript с поддержкой Office. При разработке надстройки Visual Studio размещает веб-приложение на локальном сервере IIS. Для публикации надстройки этот проект веб-приложения нужно развернуть на веб-сервере.

Обновление кода

  1. Файл Home.html содержит HTML-контент, который будет отображаться в области задач надстройки. В Home.htmlнайдите <p> элемент , содержащий текст "В этом примере будет прочитано текущее выделение документа". И <button> элемент, в котором id имеет значение get-data-from-selection. Замените все эти элементы следующей разметкой, а затем сохраните файл.

    <p class="ms-font-m-plus">This example will get some details about the current slide.</p>

<button class="Button Button--primary" id="get-data-from-selection">
    <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
    <span class="Button-label">Get slide details</span>
    <span class="Button-description">Gets and displays the current slide's details.</span>
</button>

  2. Откройте файл Home.js в корневой папке проекта веб-приложения. Этот файл содержит скрипт надстройки. Найдите функцию getDataFromSelection и замените всю функцию следующим кодом, а затем сохраните файл.

    // Gets some details about the current slide and displays them in a notification.
function getDataFromSelection() {
    if (Office.context.document.getSelectedDataAsync) {
        Office.context.document.getSelectedDataAsync(Office.CoercionType.SlideRange,
            function (result) {
                if (result.status === Office.AsyncResultStatus.Succeeded) {
                    showNotification('Some slide details are:', '"' + JSON.stringify(result.value) + '"');
                } else {
                    showNotification('Error:', result.error.message);
                }
            }
        );
    } else {
        app.showNotification('Error:', 'Reading selection data is not supported by this host application.');
    }
}

Обновление манифеста

  1. Откройте файл манифеста только надстройки в проекте надстройки. Этот файл определяет параметры и возможности надстройки.

  2. Элемент ProviderName содержит заполнитель. Замените его на свое имя.

  3. Атрибут DefaultValue элемента DisplayName содержит заполнитель. Замените его на строку Моя надстройка Office.

  4. Атрибут DefaultValue элемента Description содержит заполнитель. Замените его контентной надстройкой для PowerPoint.

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

    ...
<ProviderName>John Doe</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
<DisplayName DefaultValue="My Office Add-in" />
<Description DefaultValue="A content add-in for PowerPoint."/>
...

Проверка

  1. С помощью Visual Studio протестируйте созданную надстройку PowerPoint, нажав клавишу F5 или нажав кнопку Пуск , чтобы запустить PowerPoint с контентной надстройкой, отображаемой на слайде.

  2. В PowerPoint нажмите кнопку Получить сведения о слайде в контентной надстройке, чтобы получить сведения о текущем слайде.

    Содержимое надстройки, открытое в PowerPoint.

Примечание.

Чтобы увидеть выходные данныеconsole.log, нужен отдельный набор средств разработчика для консоли JavaScript. Дополнительные сведения о средствах F12 и средствах разработчика Microsoft Edge см. в статье Отладка надстроек с помощью средств разработчика для Internet Explorer, Отладка надстроек с помощью средств разработчика для устаревшей версии Microsoft Edge или Отладка надстроек с помощью средств разработчика в Microsoft Edge (на основе Chromium).

Дальнейшие действия

Поздравляем, вы успешно создали контентную надстройку PowerPoint! Теперь изучите дополнительные сведения о разработке надстроек Office с помощью Visual Studio.

Устранение неполадок

  • Если надстройка отображает ошибку (например, "Не удалось запустить эту надстройку. Закройте это диалоговое окно, чтобы игнорировать проблему, или нажмите кнопку "Перезапустить", чтобы повторить попытку.") При нажатии клавиши F5 или нажатии кнопки Отладка>Начать отладку в Visual Studio см . раздел Отладка надстроек Office в Visual Studio для других параметров отладки.

См. также