从网页创建 Excel 电子表格，用数据填充，并嵌入 Office 加载项

Microsoft 与 SaaS Web 应用程序的合作伙伴知道，他们的客户通常希望从 Excel 电子表格中的网页打开其数据。 他们使用 Excel 对数据或其他类型的数字进行分析。 然后，他们将数据上传回网站。

无需执行多个步骤将数据从网站导出到 .csv 文件、将 .csv 文件导入 Excel、处理数据、从 Excel 导出数据并将其上传回网站，我们可以将此过程简化为单击一个按钮。

本文介绍如何将 Excel 按钮添加到网站。 当客户选择该按钮时，它会自动创建一个包含所请求数据的新电子表格，将其上传到客户的 OneDrive，并在新的浏览器选项卡上的 Excel 中打开它。单击一下，请求的数据在 Excel 中打开并正确设置格式。 此外，该模式还会在电子表格中嵌入你自己的 Office 外接程序，以便客户仍可以从 Excel 上下文访问你的服务。

实施此模式的 Microsoft 合作伙伴的客户满意度有所提高。 通过将加载项嵌入到 Excel 电子表格中，他们还看到加载项的参与度显著提高。 我们建议，如果你有一个网站供客户使用数据，请考虑在自己的解决方案中实现此模式。

先决条件

• Visual Studio 2022 或更高版本。 配置 Visual Studio 时添加 Office/SharePoint 开发工作负载。
• Visual Studio Code。
• Microsoft 365。 可以获取免费的开发人员沙盒，该沙盒提供可续订的 90 天Microsoft 365 E5开发人员订阅。 开发人员沙盒包含 Microsoft Azure 订阅，可在本文后面的步骤中使用该订阅进行应用注册。 如果需要，可以使用单独的 Microsoft Azure 订阅进行应用注册。 在 Microsoft Azure 获取试用版订阅。
• Microsoft 365 帐户中的 OneDrive 上的一个或多个文件和文件夹。

运行示例代码

本文的示例代码名为 “从网站创建电子表格”，用数据填充，并嵌入 Excel 加载项 若要运行示例，请按照 自述文件中的说明进行操作。

解决方案体系结构

本文中所述的解决方案将“在 Microsoft Excel 中打开”按钮添加到网站，并与Azure Functions和 Microsoft 图形 API交互。 当用户希望在新的 Excel 电子表格中打开其数据时，会发生以下事件序列。

1. 用户选择“ 在 Microsoft Excel 中打开 ”按钮。 网页将数据传递到Azure Functions应用中的函数。
2. 函数使用 Open XML SDK 在内存中创建新的 Excel 电子表格。 它使用数据填充电子表格，并嵌入 Office 外接程序。
3. 函数将电子表格作为 Base64 编码字符串返回网页。
4. 网页调用 Microsoft 图形 API，将电子表格上传到用户的 OneDrive。
5. Microsoft Graph 返回新电子表格文件的 Web URL 位置。
6. 网页将打开一个新的浏览器选项卡，以在 Web URL 处打开电子表格。 电子表格包含数据和加载项。

解决方案的关键部分

该解决方案有两个生成的项目：

• 包含FunctionCreateSpreadsheet函数的Azure Functions应用。
• Node.js Web 应用程序项目。

以下部分介绍用于构造解决方案的重要概念和实现详细信息。 有关其他实现详细信息 ，可以在示例代码 中找到完整的参考实现。

Excel 按钮和 Fluent UI

网站上需要一个用于创建 Excel 电子表格的按钮。 最佳做法是使用 Fluent UI 来帮助用户在 Microsoft 产品之间切换。 应始终使用 Office 图标来指示将从网页启动哪个 Office 应用程序。 有关详细信息，请参阅 Fluent UI 开发人员门户中的 Office 品牌图标 。

登录用户

示例代码是从名为 Vanilla JavaScript 单页应用程序的 Microsoft 标识示例生成的，使用 MSAL.js 对调用 Microsoft Graph 的用户进行身份验证。 所有身份验证代码和 UI 都来自此示例。 有关编写用于身份验证和授权的代码的详细信息，请参阅此示例。 有关各种平台的标识示例的完整列表，请参阅Microsoft 标识平台代码示例。

使用 Open XML SDK 创建电子表格

示例代码使用 Open XML SDK 创建电子表格。 由于 Open XML SDK 使用 .NET，因此它封装在名为 FunctionCreateSpreadsheet的Azure Functions应用中。 可以从 Node.js Web 应用程序调用此函数。 FunctionCreateSpreadsheet 使用 SpreadsheetBuilder 帮助程序类在内存中创建新的电子表格。 该代码基于 通过 (Open XML SDK) 提供文件名来创建电子表格文档 。

使用数据填充电子表格

函数 FunctionCreateSpreadsheet 接受包含行和列数据的 JSON 正文。 这会传递给 SpreadsheetBuilder.InsertData 循环访问所有行和列并将其添加到工作表的方法。

SpreadsheetBuilder大部分类都包含 Open XML 2.5 SDK Productivity Tools 生成的代码。 Open XML 2.5 SDK 的链接中提供了这些内容。

在电子表格中嵌入 Office 加载项

类SpreadsheetBuilder还将Script Lab外接程序嵌入电子表格中，并配置为在打开文档时显示。

SpreadsheetBuilder.cs 文件中的 SpreadsheetBuilder.GenerateWebExtensionPart1Content 方法设置对 Microsoft AppSource 中Script Lab ID 的引用：

We.WebExtensionStoreReference webExtensionStoreReference1 = new We.WebExtensionStoreReference() { Id = "wa104380862", Version = "1.1.0.0", Store = "en-US", StoreType = "OMEX" };

• StoreType 值为“OMEX”，这是 Microsoft AppSource 的别名。
• Microsoft AppSource 区域性部分中的 Microsoft AppSource 值是“en-US”Script Lab。
• ID 值是Script Lab的 Microsoft AppSource 资产 ID。

可以更改这些值以嵌入自己的 Office 外接程序。 这使用户能够发现它，并增加加载项和 Web 服务的参与度。 如果加载项是通过集中部署部署的，请改用以下值。

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 编码字符串版本返回到 Web 应用程序。 然后，Web 应用程序使用 Microsoft 图形 API将电子表格上传到用户的 OneDrive。 Web 应用程序在 \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 设置 get 方法 检索自定义属性。 以下示例演示如何从电子表格获取用户名属性。

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

警告

不要将敏感信息存储在自定义属性（如身份验证令牌或连接字符串）中。 电子表格中的属性未加密或受保护。

有关在外接程序启动时如何读取自定义属性的完整详细信息，请参阅 持久保存加载项状态和设置 。

使用单一登录

为了简化身份验证，我们建议加载项实现单一登录。 这可确保用户无需再次登录即可访问加载项。 有关详细信息，请参阅 为 Office 加载项启用单一登录

另请参阅

• 欢迎使用 Open XML SDK 2.5 for Office
• 随文档自动打开任务窗格
• 保留加载项状态和设置
• 通过提供文件名创建电子表格文档