Создание надстройки области задач ExcelBuild an Excel task pane add-in using Vue

В этой статье вы ознакомитесь с процессом создания надстройки области задач Excel.In this article, you'll walk through the process of building an Outlook task pane add-in.

Создание надстройкиCreate the add-in

Надстройку Office можно создать с помощью генератора Yeoman для надстроек Office или Visual Studio.You can create an Office Add-in by using the Yeoman generator for Office Add-ins or Visual Studio. Генератор Yeoman создает проект Node.js, которым можно управлять с помощью Visual Studio Code или любого другого редактора, а Visual Studio создает решение Visual Studio.The Yeoman generator creates a Node.js project that can be managed with Visual Studio Code or any other editor, whereas Visual Studio creates a Visual Studio solution. Выберите вкладку с нужным вариантом и следуйте инструкциям, чтобы создать надстройку и протестировать ее локально.Select the tab for the one you'd like to use and then follow the instructions to create your add-in and test it locally.

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

  • Node.js (версия 8.0.0 или более поздняя)Node.js (version 8.0.0 or later)

  • GitGit

  • Последняя версия Yeoman и генератора Yeoman для надстроек Office. Выполните в командной строке указанную ниже команду, чтобы установить эти инструменты глобально.The latest version of Yeoman and the Yeoman generator for Office Add-ins. To install these tools globally, run the following command via the command prompt:

    npm install -g yo generator-office
    

    Примечание

    Даже если вы ранее установили генератор Yeoman, рекомендуем обновить его до последней версии из NPM.Even if you've previously installed the Yeoman generator, we recommend you update your package to the latest version from npm.

Создание проекта надстройкиCreate the add-in project

Выполните следующую команду, чтобы создать проект надстройки с помощью генератора Yeoman:Run the following command to create an add-in project using the Yeoman generator:

yo office

Примечание

При выполнении yo office команды могут появиться приглашения о политиках сбора данных Yeoman и СРЕДСТВАх CLI для надстройки Office.When you run the yo office command, you may receive prompts about the data collection policies of Yeoman and the Office Add-in CLI tools. Используйте сведения, которые предоставляются для ответа на приглашения, как они отображаются.Use the information that's provided to respond to the prompts as you see fit.

При появлении соответствующего запроса укажите следующие сведения для создания проекта надстройки:When prompted, provide the following information to create your add-in project:

  • Выберите тип проекта: Office Add-in Task Pane projectChoose a project type: Office Add-in Task Pane project
  • Выберите тип сценария: JavascriptChoose a script type: Javascript
  • Как вы хотите назвать надстройку?What do you want to name your add-in? My Office Add-in
  • Какое клиентское приложение Office должно поддерживаться?Which Office client application would you like to support? Excel

Генератор Yeoman

После завершения работы мастера генератор создаст проект и установит вспомогательные компоненты Node.After you complete the wizard, the generator will create the project and install supporting Node components.

Совет

Вы можете проигнорировать дальнейшие указания, которые предоставляет генератор Yeoman после создания проекта надстройки.You can ignore the next steps guidance that the Yeoman generator provides after the add-in project's been created. Пошаговые инструкции, приведенные в этой статье, содержат все рекомендации, которые необходимо выполнить в этом руководстве.The step-by-step instructions within this article provide all of the guidance you'll need to complete this tutorial.

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

Проект надстройки, который вы создали с помощью генератора Yeoman, содержит пример кода для простейшей надстройки области задач.The add-in project that you've created with the Yeoman generator contains sample code for a very basic task pane add-in. Если вы хотите ознакомиться с компонентами проекта надстройки, откройте проект в редакторе кода и просмотрите файлы, перечисленные ниже.If you'd like to explore the components of your add-in project, open the project in your code editor and review the files listed below. Когда вы будете готовы попробовать собственную надстройку, перейдите к следующему разделу.When you're ready to try out your add-in, proceed to the next section.

  • Файл ./manifest.xml в корневом каталоге проекта определяет параметры и возможности надстройки.The ./manifest.xml file in the root directory of the project defines the settings and capabilities of the add-in.
  • Файл ./src/taskpane/taskpane.html содержит разметку HTML для области задач.The ./src/taskpane/taskpane.html file contains the HTML markup for the task pane.
  • Файл ./src/taskpane/taskpane.css содержит код CSS, который применяется к содержимому области задач.The ./src/taskpane/taskpane.css file contains the CSS that's applied to content in the task pane.
  • Файл ./src/taskpane/taskpane.js содержит код API JavaScript для Office, который упрощает взаимодействие между областью задач и ведущим приложением Office.The ./src/taskpane/taskpane.js file contains the Office JavaScript API code that facilitates interaction between the task pane and the Office host application.

ПроверкаTry it out

  1. Перейдите к корневой папке проекта.Navigate to the root folder of the project.

    cd "My Office Add-in"
    
  2. Выполните следующие действия, чтобы запустить локальный веб-сервер и загрузить неопубликованную надстройку.Complete the following steps to start the local web server and sideload your add-in.

    Примечание

    Надстройки Office должны использовать HTTPS, а не HTTP, даже в случае разработки.Office Add-ins should use HTTPS, not HTTP, even when you are developing. Если вам будет предложено установить сертификат после того, как вы запустите одну из указанных ниже команд, примите предложение установить сертификат, предоставленный генератором Yeoman.If you are prompted to install a certificate after you run one of the following commands, accept the prompt to install the certificate that the Yeoman generator provides.

    Совет

    Если вы тестируете надстройку на компьютере Mac, перед продолжением выполните указанную ниже команду.If you're testing your add-in on Mac, run the following command before proceeding. После выполнения этой команды запустится локальный веб-сервер.When you run this command, the local web server will start.

    npm run dev-server
    
    • Чтобы проверить надстройку в Excel, выполните приведенную ниже команду в корневом каталоге своего проекта.To test your add-in in Excel, run the following command in the root directory of your project. При этом запускается локальный веб-сервер (если он еще не запущен) и открывается приложение Excel с загруженной надстройкой.This starts the local web server (if it's not already running) and opens Excel with your add-in loaded.

      npm start
      
    • Чтобы проверить надстройку в Excel в браузере, выполните приведенную ниже команду в корневом каталоге своего проекта.To test your add-in in Excel on a browser, run the following command in the root directory of your project. После выполнения этой команды запустится локальный веб-сервер (если он еще не запущен).When you run this command, the local web server will start.

      npm run start:web
      

      Чтобы использовать надстройку, откройте новую книгу в Excel в Интернете и затем загрузите неопубликованную надстройку, следуя инструкциям в статье Загрузка неопубликованных надстроек Office в Office в Интернете.To use your add-in, open a new document in Word Online and then sideload your add-in by following the instructions in Sideload Office Add-ins in Office Online.

  3. В Excel выберите вкладку Главная и нажмите кнопку Показать область задач на ленте, чтобы открыть область задач надстройки.In Excel, choose the Home tab, and then choose the Show Taskpane button in the ribbon to open the add-in task pane.

    Кнопка надстройки Excel

  4. Выберите любой диапазон ячеек на листе.Select any range of cells in the worksheet.

  5. Внизу области задач выберите ссылку Выполнить, чтобы задать выбранному диапазону желтый цвет.At the bottom of the task pane, choose the Run link to set the color of the selected range to yellow.

    Надстройка Excel

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

Поздравляем! Вы успешно создали надстройку области задач Excel!Congratulations, you've successfully created an Excel task pane add-in using Vue! Чтобы узнать больше о возможностях надстроек Excel и создать более сложную надстройку, воспользуйтесь руководством по надстройкам Excel.Next, learn more about the capabilities of an Excel add-in and build a more complex add-in by following along with the Excel add-in tutorial.

См. такжеSee also