Создание книги Excel с веб-сайта с автоматически открытой областью задач

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

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

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

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

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

• Node.js (последняя версия Active LTS).
• Visual Studio Code.
• Учетная запись Microsoft 365. Вы можете получить ее, если вы имеете право на подписку на Microsoft 365 E5 разработчика в рамках программы microsoft 365 для разработчиков. Дополнительные сведения см. в разделе Вопросы и ответы. Кроме того, вы можете зарегистрироваться для получения бесплатной пробной версии на 1 месяц или приобрести план Microsoft 365.
• По крайней мере несколько файлов и папок, хранящихся в OneDrive для бизнеса в подписке Microsoft 365.

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

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

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

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

1. Пользователь нажимает кнопку Открыть в Microsoft Excel . Веб-страница передает данные в конечную точку API на сервере Node.js.
2. Сервер использует библиотеку ExcelJS для создания новой электронной таблицы Excel в памяти. Он заполняет электронную таблицу данными и внедряет надстройку Office.
3. Сервер возвращает электронную таблицу в виде двоичного BLOB-объекта на веб-страницу.

   Важно!

   Пример кода предназначен только для разработки и демонстрации. В рабочей среде необходимо реализовать проверку подлинности и авторизацию для конечной /api/create-spreadsheet точки, чтобы только авторизованные пользователи могли создавать электронные таблицы. Без надлежащих мер безопасности злоумышленники могут использовать эту конечную точку для создания чрезмерных электронных таблиц, потребления ресурсов сервера или неправильного доступа к данным.

4. Веб-страница вызывает microsoft API Graph для отправки электронной таблицы в OneDrive пользователя.
5. Microsoft Graph возвращает url-адрес нового файла электронной таблицы.
6. Веб-страница открывает новую вкладку браузера, чтобы открыть электронную таблицу по URL-адресу веб-сайта. Электронная таблица содержит данные и внедренную надстройку.

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

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

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

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

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

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

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

Пример кода использует библиотеку ExcelJS для создания электронной таблицы. ExcelJS — это библиотека JavaScript, которую можно использовать для чтения, обработки и записи файлов Excel. Сервер Node.js предоставляет конечную точку API, /api/create-spreadsheet которая создает электронную таблицу в памяти и возвращает ее в виде двоичного BLOB-объекта.

Чтобы внедрить надстройку, в примере используются JSZip и xml2js для управления структурой Office Open XML (OOXML) файла Excel.

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

Конечная /api/create-spreadsheet точка на сервере Node.js принимает HTTP-запрос POST с текстом JSON, содержащим данные строки и столбца. Код сервера выполняет итерацию по всем строкам и столбцам и добавляет их на лист с помощью ExcelJS. Формат данных представляет собой простую структуру JSON со строками и столбцами, как определено в файле примера tableData.js .

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

Пример внедряет настраиваемую надстройку в электронную таблицу. Для внедрения надстроек Office требуется управлять структурой Office Open XML (OOXML) файла Excel. Функция примера embedAddin в server.js выполняет следующие операции:

• Добавляет webextension1.xml со ссылкой на надстройку.
• Добавляет taskpanes.xml для настройки поведения области задач.
• [Content_Types].xml Обновления, чтобы зарегистрировать части веб-расширения.
• workbook.xml.rels Обновления для связывания конфигурации области задач.

Настройка поведения автоматического открытия

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

1. Первое открытие. Пользователь открывает скачанный файл. Область задач пока не открывается автоматически.
2. Активация вручную. Пользователь нажимает кнопку Показать область задач на ленте.
3. Включить автоматическое открытие. Пользователь выбирает Задать автоматическое открытие в области задач.
4. Сохранить файл. Пользователь сохраняет и закрывает файл.
5. Последующие открытия. Область задач теперь автоматически открывается, когда пользователь повторно открывает файл.

Office.js управляет поведением автоматического открытия, задавая свойство Office.AutoShowTaskpaneWithDocumentдокумента .

function setAutoOpenOn() {
    Office.context.document.settings.set(
        'Office.AutoShowTaskpaneWithDocument',
        true
    );
    Office.context.document.settings.saveAsync();
}

Этот рабочий процесс является стандартным поведением надстройки Office. Дополнительные сведения см. в статье Автоматическое открытие области задач с помощью документа.

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

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

Вопросы безопасности при развертывании в рабочей среде

Защита конечной точки API

Конечная /api/create-spreadsheet точка выступает в качестве критической границы безопасности. Без надлежащей защиты злоумышленники могут:

• Создавайте неограниченное количество электронных таблиц, потребляя серверные ресурсы и хранилище.
• Доступ к данным, на просмотр которых у них не должно быть разрешений.
• Запускайте атаки типа "отказ в обслуживании" на сервере.

Необходимые меры безопасности:

1. Проверка подлинности: проверьте удостоверение пользователя перед обработкой любого запроса. Используйте установленные протоколы проверки подлинности, такие как:

   • Токены OAuth 2.0
   • Веб-токены JSON (JWT)
   • Проверка подлинности на основе сеанса с безопасными файлами cookie

2. Авторизация. Убедитесь, что пользователь, прошедший проверку подлинности, имеет разрешение на доступ к конкретным запрашиваемой данных. Реализовать:

   • Управление доступом на основе ролей (RBAC)
   • Проверка разрешений на уровне данных
   • Проверка того, что пользователь владеет запрошенными данными или имеет доступ к ней

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

4. Ограничение скорости. Реализуйте ограничение скорости для предотвращения злоупотреблений и защиты от атак типа "отказ в обслуживании".

5. HTTPS: всегда используйте ПРОТОКОЛ HTTPS в рабочей среде для шифрования передаваемых данных.

6. Конфигурация CORS: правильно настройте общий доступ к ресурсам между источниками (CORS), чтобы разрешить только доверенные домены.

Дополнительные рекомендации по обеспечению безопасности

• Регулярно обновляйте все пакеты npm для устранения уязвимостей системы безопасности с помощью npm audit.
• Реализуйте ведение журнала и мониторинг для обнаружения подозрительных действий.
• Используйте переменные среды для конфиденциальной конфигурации (никогда не секреты жесткого кода).
• Рассмотрите возможность реализации заголовков политики безопасности содержимого (CSP).
• Проверьте размер файлов и содержимое, чтобы предотвратить негабаритные или вредоносные электронные таблицы.

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

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

Хранение данных в электронной таблице при запуске надстройки

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

• API параметров. Используйте Excel.SettingCollection для хранения параметров, уникальных для вашей надстройки и книги.
• Пользовательские свойства. Используйте Excel.DocumentProperties.custom для хранения пар "ключ-значение" в метаданных книги.
• Пользовательские XML-данные. Используйте Excel.Workbook.customXmlParts для хранения структурированных XML-данных в книге.

Полные сведения о сохранении данных в книгах Excel см. в разделе Сохранение состояния и параметров надстройки.

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

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

См. также

• Добро пожаловать на страницу пакета SDK 2.5 Open XML для Office
• Автоматическое открытие области задач с документом
• Persisting add-in state and settings
• Создайте документ электронной таблицы, указав имя файла