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

Из этой статьи вы узнаете, как создать надстройку области Excel, используя Vue и API JavaScript для Excel.

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

Примечание

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

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

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

    npm install -g yo generator-office
    

    Примечание

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

  • Установите Vue CLI глобально. В терминале выполните следующую команду:

    npm install -g @vue/cli
    

Создание нового приложения Vue

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

vue create my-add-in

Затем выберите предустановку Default для "Vue 3" (также можно использовать "Vue 2").

Создание файла манифеста

У каждой надстройки должен быть файл манифеста, в нем определяются ее параметры и возможности.

  1. Перейдите к папке приложения.

    cd my-add-in
    
  2. Используя генератор Yeoman, создайте файл манифеста для надстройки.

    yo office
    

    Примечание

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

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

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

    Интерфейс командной строки генератора Yeoman для надстроек Office, где в качестве типа проекта установлен только манифест.

По завершении мастер создает папку My Office Add-in, содержащую файл manifest.xml. Вы воспользуетесь манифестом для загрузки вашей неопубликованной надстройки и для ее тестирования.

Совет

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

Защита приложения

Использовать конечную точку HTTPS для надстройки не обязательно, но настоятельно рекомендуется. Надстройки без SSL-защиты (HTTPS) выдают предупреждения о небезопасном контенте и ошибки во время использования. Для запуска в Office в Интернете и публикации в AppSource надстройка должна быть защищена с помощью SSL. Если надстройка получает данные из внешнего источника, она должна использовать SSL-соединение для защиты данных при передаче. Самозаверяющие сертификаты можно использовать для разработки и тестирования, если они добавлены в список доверенных сертификатов на локальном компьютере.

  1. Включите протокол HTTPS для вашего приложения. В корневой папке проекта Vue создайте файл vue.config.js со следующим содержимым.

    const fs = require("fs");
    const path = require("path");
    const homedir = require('os').homedir()
    
    module.exports = {
      devServer: {
        port: 3000,
        https: {
          key: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/localhost.key`)),
          cert: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/localhost.crt`)),
          ca: fs.readFileSync(path.resolve(`${homedir}/.office-addin-dev-certs/ca.crt`)),
         }
       }
    }
    
  2. Установите сертификаты надстройки.

    npx office-addin-dev-certs install
    

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

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

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

Обновите приложение

  1. Откройте файл ./public/index.html и добавьте следующий тег <script> непосредственно перед тегом </head>.

    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
    
  2. Откройте файл manifest.xml и найдите теги <bt:Urls> внутри тега <Resources>. Найдите тег <bt:Url> с идентификатором Taskpane.Url и обновите его атрибут DefaultValue. Новое значение DefaultValuehttps://localhost:3000/index.html. Весь обновленный тег должен совпадать со следующей строкой.

    <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/index.html" />
    
  3. Откройте файл src/main.js и замените его содержимое на следующий код.

    import { createApp } from 'vue'
    import App from './App.vue'
    
    window.Office.onReady(() => {
        createApp(App).mount('#app');
    });
    
  4. Откройте файл ./src/App.vue и замените его содержимое на следующий код.

    <template>
      <div id="app">
        <div class="content">
          <div class="content-header">
            <div class="padding">
              <h1>Welcome</h1>
            </div>
          </div>
          <div class="content-main">
            <div class="padding">
              <p>
                Choose the button below to set the color of the selected range to
                green.
              </p>
              <br />
              <h3>Try it out</h3>
              <button @click="onSetColor">Set color</button>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'App',
        methods: {
          onSetColor() {
            window.Excel.run(async context => {
              const range = context.workbook.getSelectedRange();
              range.format.fill.color = 'green';
              await context.sync();
            });
          }
        }
      };
    </script>
    
    <style>
      .content-header {
        background: #2a8dd4;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        overflow: hidden;
      }
    
      .content-main {
        background: #fff;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
      }
    
      .padding {
        padding: 15px;
      }
    </style>
    

Запуск сервера разработки

  1. Запустите сервер разработки

    npm run serve
    
  2. В веб-браузере перейдите по адресу https://localhost:3000 (обратите внимание на https). Если страница https://localhost:3000 пуста, а ошибки сертификата отсутствуют, значит, эта страница работает. Приложение Vue подключается после запуска Office, поэтому в нем отображаются только элементы из среды Excel.

Проверка

  1. Запустите надстройку и загрузите неопубликованную надстройку в Excel. Следуйте инструкциям для используемой вами платформы:

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

    Меню "Главная" в Excel с выделенной кнопкой "Показать область задач".

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

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

    Открытая область задач надстройки в Excel.

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

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

См. также