Создание надстройки области задач Excel

В этой статье вы ознакомитесь с процессом создания надстройки области задач Excel.

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

Можно создать надстройку Office с помощью генератора Yeoman для надстроек Office или Visual Studio. Генератор Yeoman создает проект Node.js, которым можно управлять с помощью Visual Studio Code или любого другого редактора, а Visual Studio создает решение Visual Studio. Выберите вкладку с нужным вариантом и следуйте инструкциям, чтобы создать надстройку и протестировать ее локально.

• Генератор Yeoman
• Visual Studio

Чтобы создать надстройку, в которой используется единый вход (SSO), с помощью генератора Yeoman, см. инструкции в кратком руководстве по единому входу (SSO).

Необходимые условия

Если вы не знакомы с Node.js или NPM, начните с настройки среды разработки.

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

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

Выполните следующую команду, чтобы создать проект надстройки с помощью генератора Yeoman.

При выполнении команды yo office может появиться запрос о политиках сбора данных генератора Yeoman и средств CLI надстройки Office. Используйте предоставленные сведения, чтобы ответить на запросы подходящим образом.

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

• Выберите тип проекта: Office Add-in Task Pane project
• Выберите тип сценария: Javascript
• Как вы хотите назвать надстройку? My Office Add-in
• Какое клиентское приложение Office должно поддерживаться? Excel

После завершения работы мастера генератор создаст проект и установит вспомогательные компоненты Node.

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

Проект надстройки, который вы создали с помощью генератора Yeoman, содержит образец кода для простой надстройки области задач. Если вы хотите ознакомиться с компонентами проекта надстройки, откройте проект в редакторе кода и просмотрите файлы, перечисленные ниже. Когда вы будете готовы попробовать собственную надстройку, перейдите к следующему разделу.

• Файл ./manifest.xml в корневом каталоге проекта определяет настройки и возможности надстройки. Подробности о файле manifest.xml см. в статье XML-манифест надстроек Office.
• Файл ./src/taskpane/taskpane.html содержит разметку HTML для области задач.
• Файл ./src/taskpane/taskpane.css содержит код CSS, который применяется к содержимому области задач.
• Файл ./src/taskpane/taskpane.js содержит код API JavaScript для Office, который упрощает взаимодействие между областью задач и клиентским приложением Office.

Перейдите к корневой папке проекта.

Выполните следующие действия, чтобы запустить локальный веб-сервер и загрузить неопубликованную надстройку.

Надстройки Office должны использовать HTTPS, а не HTTP, даже в случае разработки. Если вам будет предложено установить сертификат после того, как вы запустите одну из указанных ниже команд, примите предложение установить сертификат, предоставленный генератором Yeoman. Кроме того, вам может потребоваться запустить командную строку или терминал с правами администратора, чтобы внести изменения.

Если вы тестируете надстройку на компьютере Mac, перед продолжением выполните указанную ниже команду. После выполнения этой команды запустится локальный веб-сервер.

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

Чтобы проверить надстройку в Excel в браузере, выполните приведенную ниже команду в корневом каталоге своего проекта. После выполнения этой команды запустится локальный веб-сервер. Замените "" на URL-адрес документа Excel в OneDrive или библиотеке SharePoint, для которой у вас есть разрешения.

Ниже приведены примеры.

• npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
• npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
• npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

Если надстройка не загружена в документе, вручную разгрузите ее вручную, следуя инструкциям в Sideload Officeнадстройки в Office в Интернете вручную .

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

Выберите любой диапазон ячеек на листе.

Внизу области задач выберите ссылку Выполнить, чтобы задать выбранному диапазону желтый цвет.

Поздравляем, вы успешно создали надстройку панели задач Excel! Чтобы узнать больше о возможностях надстроек Excel и создать более сложную надстройку, воспользуйтесь руководством по надстройкам Excel.

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

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

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

Если у вас еще нет Office, вы можете присоединиться к программе для разработчиков Microsoft 365, чтобы получить бесплатную 90-дневную возобновляемую подписку на Microsoft 365 для использования в процессе разработки.

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

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

Присвойте проекту имя ExcelWebAddIn1 и выберите Создать.

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

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

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

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

Файл Home.html содержит HTML-контент, который будет отображаться в области задач надстройки. В файле Home.html замените элемент <body> на приведенную ниже часть кода и сохраните файл.

Откройте файл Home.js в корневой папке проекта веб-приложения. Этот файл содержит скрипт надстройки. Замените все его содержимое указанным ниже кодом и сохраните файл.

В следующем коде используется ES6 JavaScript, который несовместим с более ранними версиями Office, применяющими подсистему браузера Internet Explorer 11. Сведения о поддержке этих платформ в рабочей среде см. в разделе Поддержка Internet Explorer 11. Присоединяйтесь к программе для разработчиков Microsoft 365, чтобы получить бесплатную 90-дневную возобновляемую подписку на Microsoft 365 с новейшими приложениями Office для использования в процессе разработки.

Откройте файл Home.css в корневой папке проекта веб-приложения. Этот файл определяет специальные стили надстройки. Замените все его содержимое указанным ниже кодом и сохраните файл.

Откройте Обозреватель решений, перейдите к проекту надстройки ExcelWebAddIn1, затем откройте каталог ExcelWebAddIn1Manifest. Этот каталог содержит ExcelWebAddIn1.xml (ваш файл манифеста). XML-файл манифеста определяет параметры и возможности надстройки. Дополнительные сведения о двух проектах, созданных решением Visual Studio, приведены ранее в разделе Обзор решения Visual Studio.

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

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

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

Протестируйте новую надстройку Excel в Visual Studio, нажав клавишу F5 или кнопку Запустить, чтобы запустить Excel с кнопкой надстройки Показать область задач на ленте. Надстройка будет размещена на локальном сервере IIS. Если вам будет предложено доверять сертификату, согласитесь, чтобы разрешить надстройке подключиться к приложению Office.

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

Выберите любой диапазон ячеек на листе.

В области задач нажмите кнопку Set color (Задать цвет), чтобы сделать выбранный диапазон зеленым.

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

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