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

Создание надстройки области задач Excel с помощью React

  • Статья

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

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

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

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

yo office

Примечание.

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

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

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

Интерфейс командной строки генератора надстроек Yeoman Office с типом проекта, для React платформы.

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

Примечание.

Если вы используете Node.js версии 20.0.0 или более поздней, при запуске установки генератора может появилось предупреждение о том, что у вас неподдерживаемый модуль. Мы работаем над исправлением этого. В то же время предупреждение не влияет на генератор или проект, который вы создаете, поэтому его можно игнорировать.

Совет

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

Знакомство с проектом

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

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

Проверка

  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, для которой у вас есть разрешения.

      Примечание.

      Если вы разрабатываете на компьютере Mac, заключите в одинарные {url} кавычки. Не делайте этого в Windows.

      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

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

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

    Меню

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

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

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

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

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

Руководство по надстройкам Excel

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

См. также