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

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

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

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

Совет

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

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

Примечание

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

  • Node.js (последняя версия LTS).

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

    npm install -g yo generator-office
    

    Примечание

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

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

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

yo office

Примечание

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

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

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

Снимок экрана: интерфейс командной строки генератора Yeoman надстроек Office.

После завершения работы мастера генератор создаст проект и установит вспомогательные компоненты 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.

Проверка

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

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

    Примечание

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

    Совет

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

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

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

      npm run start:web -- --document {url}
      

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

      • 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 в Интернете вручную .

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

    Снимок экрана: меню "Главная" в Excel с выделенной кнопкой "Показать область задач".

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

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

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

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

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

См. также