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

Создание электронной таблицы Excel на веб-странице, заполнение ее данными и внедрение надстройки Office

  • Статья

Схема: кнопка Excel на веб-странице открывает новый документ Excel и автоматически открывает надстройку в правой области.

Партнеры Корпорации Майкрософт с веб-приложениями SaaS знают, что их клиенты часто хотят открыть свои данные с веб-страницы в электронной таблице Excel. Они используют Excel для анализа данных или других типов хруст чисел. Затем они отправляют данные обратно на веб-сайт.

Вместо нескольких шагов по экспорту данных с веб-сайта в файл .csv, импорту файла .csv в Excel, работе с данными, а затем экспорту из Excel и отправке обратно на веб-сайт, мы можем упростить этот процесс одним нажатием кнопки.

В этой статье показано, как добавить кнопку Excel на веб-сайт. Когда клиент нажимает кнопку, он автоматически создает новую электронную таблицу с запрошенными данными, отправляет ее в OneDrive клиента и открывает ее в Excel на новой вкладке браузера. Одним щелчком запрошенные данные открываются в Excel и форматируются правильно. Кроме того, шаблон внедряет собственную надстройку Office в электронную таблицу, чтобы клиенты могли по-прежнему обращаться к вашим службам из контекста Excel.

Партнеры Майкрософт, которые реализовали этот шаблон, увеличили удовлетворенность клиентов. Кроме того, они значительно увеличили взаимодействие со своими надстройками, внедрив их в электронную таблицу Excel. Если у вас есть веб-сайт для работы с данными, рекомендуется реализовать этот шаблон в собственном решении.

Предварительные требования

  • Visual Studio 2022 или более поздней версии. Добавьте рабочую нагрузку разработки Office/SharePoint при настройке Visual Studio.
  • Visual Studio Code.
  • Microsoft 365. Вы можете получить бесплатную песочницу разработчика, которая предоставляет возобновляемую 90-дневную подписку Microsoft 365 E5 разработчика. Песочница разработчика включает подписку Microsoft Azure, которую можно использовать для регистрации приложений на последующих шагах в этой статье. При желании для регистрации приложений можно использовать отдельную подписку Microsoft Azure. Получите пробную подписку на Microsoft Azure.
  • Один или несколько файлов и папок в OneDrive в учетной записи Microsoft 365.

Выполнение примера кода

Пример кода для этой статьи называется Создание электронной таблицы с веб-сайта, заполнение ее данными и внедрение надстройки Excel . Чтобы запустить пример, следуйте инструкциям в средстве чтения.

Архитектура решения

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

Решение, описанное в этой статье, добавляет кнопку Открыть в Microsoft Excel на веб-сайт и взаимодействует с Функции Azure и microsoft API Graph. Следующая последовательность событий возникает, когда пользователь хочет открыть свои данные в новой электронной таблице Excel.

  1. Пользователь нажимает кнопку Открыть в Microsoft Excel . Веб-страница передает данные функции в приложении Функции Azure.
  2. Функция использует пакет SDK Open XML для создания новой электронной таблицы Excel в памяти. Он заполняет электронную таблицу данными и внедряет надстройку Office.
  3. Функция возвращает электронную таблицу в виде строки в кодировке Base64 на веб-страницу.
  4. Веб-страница вызывает microsoft API Graph для отправки электронной таблицы в OneDrive пользователя.
  5. Microsoft Graph возвращает url-адрес нового файла электронной таблицы.
  6. Веб-страница открывает новую вкладку браузера, чтобы открыть электронную таблицу по URL-адресу веб-сайта. Электронная таблица содержит данные и надстройку.

Ключевые части решения

Решение состоит из двух проектов, которые вы создаете:

  • Приложение Функции Azure, содержащее функциюFunctionCreateSpreadsheet.
  • Проект веб-приложения Node.js.

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

Кнопка Excel и пользовательский интерфейс Fluent

Значки пользовательского интерфейса Fluent для Word, Excel и PowerPoint.

Вам потребуется кнопка на веб-сайте, которая создает электронную таблицу Excel. Рекомендуется использовать пользовательский интерфейс Fluent, чтобы помочь пользователям переходить между продуктами Майкрософт. Всегда следует использовать значок Office, чтобы указать, какое приложение Office будет запущено с веб-страницы. Дополнительные сведения см. в разделе Значки фирменной символики Office на портале разработчика fluent UI.

Вход пользователя

Пример кода создан на основе примера удостоверений Майкрософт с именем Одностраничное приложение Vanilla JavaScript, использующее MSAL.js для проверки подлинности пользователей для вызова Microsoft Graph. Весь код проверки подлинности и пользовательский интерфейс приведены в этом примере. Дополнительные сведения о написании кода для проверки подлинности и авторизации см. в этом примере. Полный список примеров удостоверений для широкого спектра платформ см. в разделе примеры кода платформа удостоверений Майкрософт.

Создание электронной таблицы с помощью пакета SDK Open XML

В примере кода для создания электронной таблицы используется пакет SDK Open XML . Так как пакет SDK Open XML использует .NET, он инкапсулируется в приложение Функции Azure с именем FunctionCreateSpreadsheet. Эту функцию можно вызвать из веб-приложения Node.js. FunctionCreateSpreadsheet использует вспомогательный SpreadsheetBuilder класс для создания новой электронной таблицы в памяти. Код основан на создании документа электронной таблицы путем предоставления имени файла (Open XML SDK).

Заполнение электронной таблицы данными

Функция FunctionCreateSpreadsheet принимает текст JSON, содержащий данные строки и столбца. Он передается SpreadsheetBuilder.InsertData в метод , который выполняет итерацию по всем строкам и столбцам и добавляет их на лист.

Большая часть SpreadsheetBuilder класса содержит код, созданный средствами повышения производительности open XML 2.5 SDK. Они доступны по ссылке для пакета SDK для Open XML 2.5.

Внедрение надстройки Office в электронную таблицу

Класс SpreadsheetBuilder также внедряет надстройку Script Lab в электронную таблицу и настраивает для отображения при открытии документа.

Метод SpreadsheetBuilder.GenerateWebExtensionPart1Content в файле SpreadsheetBuilder.cs задает ссылку на идентификатор Script Lab в Microsoft AppSource:

We.WebExtensionStoreReference webExtensionStoreReference1 = new We.WebExtensionStoreReference() { Id = "wa104380862", Version = "1.1.0.0", Store = "en-US", StoreType = "OMEX" };
  • Значение StoreType — "OMEX", псевдоним для Microsoft AppSource.
  • Значение Store — "en-US" в разделе Язык и региональные параметры Microsoft AppSource для Script Lab.
  • Значение id — это идентификатор ресурса Microsoft AppSource для Script Lab.

Эти значения можно изменить, чтобы внедрить собственную надстройку Office. Это делает его обнаруживаемым для пользователя и повышает вовлеченность в надстройку и веб-службы. Если надстройка развертывается через централизованное развертывание, используйте следующие значения.

We.WebExtensionStoreReference webExtensionStoreReference1 = new We.WebExtensionStoreReference() { Id = "<Your add-in GUID>", Version = "<Your version>", Store = "excatalog", StoreType = "excatalog" };
We.WebExtensionStoreReference webExtensionStoreReference2 = new We.WebExtensionStoreReference() { Id = "<Your add-in GUID>", Version = "<Your version>", Store = "omex", StoreType = "omex" };            
webExtensionReferenceList1.Append(webExtensionStoreReference2);

Дополнительные сведения об альтернативных значениях для этих атрибутов см. в статье Автоматическое открытие области задач с документом и [MS-OWEXML]: CT_OsfWebExtensionReference

Отправка электронной таблицы в OneDrive

Когда электронная таблица полностью создана, FunctionCreateSpreadsheet функция возвращает веб-приложению строковую версию таблицы в кодировке Base64. Затем веб-приложение использует microsoft API Graph для отправки электронной таблицы в OneDrive пользователя. Веб-приложение создает файл по адресу \openinexcel\spreadsheet.xlsx, но вы можете изменить код, чтобы использовать любую папку и имя файла.

Дополнительные рекомендации по решению

Решение каждого человека отличается с точки зрения технологий и подходов. Следующие рекомендации помогут вам спланировать изменение решения для открытия документов и внедрения надстройки Office.

Чтение пользовательских свойств при запуске надстройки

При внедрении надстройки в электронную таблицу можно включить пользовательские свойства. Файл SpreadsheetBuilder.cs содержит закомментированный код, который показывает, как вставить имя пользователя, если у вас есть переменная userName .

    // CUSTOM MODIFICATION BEGIN
    // Uncomment the following code to add your own custom name/value pair properties for the add-in.
    // We.WebExtensionProperty webExtensionProperty2 = new We.WebExtensionProperty() { Name = "userName", Value = userName };
    // webExtensionPropertyBag1.Append(webExtensionProperty2);
    // CUSTOM MODIFICATION END

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

let userName = Office.context.document.settings.get('userName'));

Предостережение

Не храните конфиденциальную информацию в пользовательских свойствах, таких как маркеры проверки подлинности или строки подключения. Свойства в электронной таблице не шифруются и не защищаются.

Подробные сведения о том, как считывать пользовательские свойства при запуске надстройки, см. в разделе Сохранение состояния и параметров надстройки.

Использование единого входа

Чтобы упростить проверку подлинности, рекомендуется реализовать единый вход в надстройку. Это гарантирует, что пользователю не потребуется второй вход для доступа к надстройке. Дополнительные сведения см. в статье Включение единого входа для надстроек Office.

См. также