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

Создание автономной надстройки Office на основе кода Script Lab

Если вы создали фрагмент в Script Lab, может потребоваться превратить его в автономную надстройку. Вы можете скопировать код из Script Lab в проект, созданный генератором Yeoman для надстроек Office (другое название — "Yo Office"). Затем вы можете продолжить разработку кода в качестве надстройки, которую в конечном итоге можно развернуть для других пользователей.

Действия в этой статье относятся к Visual Studio Code, но вы можете использовать любой другой редактор кода.

Создание проекта Yo Office

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

Открытие фрагмента кода в Script Lab

  1. Откройте Office (Word, Excel, PowerPoint или Outlook), а затем — Script Lab.
  2. Выберите Script Lab>Код.
  3. Откройте фрагмент кода в Script Lab.

Копирование фрагмента кода в Visual Studio Code

Теперь можно скопировать код из фрагмента кода в проект Yo Office в Visual Studio Code.

В Visual Studio Code откройте проект надстройки. На следующих шагах вы скопируете код с нескольких вкладок в Script Lab.

Вкладки в Script Lab.

Копирование кода области задач

  1. В Visual Studio Code откройте файл /src/taskpane/taskpane.ts. Если вы используете проект JavaScript, имя файла будетtaskpane.js.
  2. В Script Lab выберите вкладку Скрипт.
  3. Скопируйте весь код на вкладке Скрипт в буфер обмена. Замените все содержимое taskpane.ts (или taskpane.js для JavaScript) скопированным кодом.

Копирование HTML-кода области задач

  1. В Visual Studio Code откройте файл /src/taskpane/taskpane.html.
  2. В Script Lab выберите вкладку HTML.
  3. Скопируйте весь HTML-код на вкладке HTML в буфер обмена. Замените весь HTML-код внутри тега <body> скопированным HTML-кодом.

Копирование CSS области задач

  1. В Visual Studio Code откройте файл /src/taskpane/taskpane.css.
  2. В Script Lab выберите вкладку CSS.
  3. Скопируйте весь код CSS на вкладке CSS в буфер обмена. Замените все содержимое taskpane.css скопированным кодом CSS.
  4. Сохраните все изменения в файлах, обновленных на предыдущих шагах.

Добавление дополнительной поддержки библиотеки

Если вы создали фрагмент с дополнительными зависимостями библиотеки, добавьте его в проект Yo Office, выполнив следующие действия.

  1. Найдите список всех зависимостей библиотеки на вкладке Библиотеки в Script Lab.
  2. Для каждой <script> библиотеки добавьте тег в <head> файл /src/taskpane/taskpane.html .
  3. Задайте для src атрибута тега URL-адрес библиотеки.

Дополнительные сведения см. в разделе Атрибут src тега скрипта HTML.

Обработка инициализации

Script Lab автоматически обрабатывает инициализациюOffice.onReady. Необходимо изменить код, чтобы предоставить собственный Office.onReady обработчик.

  1. Откройте файл taskpane.ts (или taskpane.js для JavaScript).

  2. Заключите назначения обработчика событий в обратные вызовы к событиям, загруженным содержимым Office onReady и HTML DOM. Например, замените:

    document.getElementById("run").addEventListener("click", () => tryCatch(run));

    на:

    Office.onReady(function () {
  // Office is ready.      
  document.addEventListener("DOMContentLoaded", () => {
    // The document is ready.
    document.getElementById("run").addEventListener("click", () => tryCatch(run));
  });
});

  3. Сохраните файл.

Настраиваемые функции

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

  1. Откройте Excel, а затем — Script Lab.
  2. Выберите Script Lab>Код.
  3. Откройте фрагмент кода в Script Lab.
  4. Откройте файл /src/functions/functions.ts. Если вы используете проект JavaScript, именем файла будет functions.js.
  5. В Script Lab выберите вкладку Скрипт.
  6. Скопируйте весь код на вкладке Скрипт в буфер обмена. Вставьте код в начало functions.ts (или functions.js для JavaScript) с скопированным кодом.
  7. Сохраните файл.

Тестирование автономной надстройки

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

npm start

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

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

npm stop

Дополнительные сведения о загрузке, тестировании и устранении неполадок надстройки см. в разделе Тестирование и отладка документации.

Ведение журнала консоли

Многие фрагменты кода в Script Lab записывают выходные данные в раздел консоли в нижней части области задач. У проекта Yo Office нет раздела консоли. Все console.log* инструкции записываются в консоль отладки по умолчанию (например, в средства разработчика браузера). Если вы хотите, чтобы выходные данные переходят в область задач, необходимо обновить код.

  • Last updated on