Cree una hoja de cálculo de Excel desde la página web, rellénela con datos e inserte el complemento de Office.

  • Artículo

Diagrama que ilustra cómo el botón de Excel de la página web abre un nuevo documento de Excel y abre automáticamente el complemento en el panel derecho.

Los asociados de Microsoft con aplicaciones web SaaS saben que sus clientes a menudo quieren abrir sus datos desde una página web en una hoja de cálculo de Excel. Usan Excel para realizar análisis de los datos u otros tipos de contracción de números. A continuación, cargan los datos de nuevo en el sitio web.

En lugar de varios pasos para exportar los datos del sitio web a un archivo .csv, importe el archivo .csv en Excel, trabaje con los datos, luego exporte los datos desde Excel y cárguelos de nuevo en el sitio web, podemos simplificar este proceso con un solo clic de botón.

En este artículo se muestra cómo agregar un botón de Excel al sitio web. Cuando un cliente elige el botón, crea automáticamente una hoja de cálculo con los datos solicitados, la carga en OneDrive del cliente y la abre en Excel en una nueva pestaña del explorador. Con un solo clic, los datos solicitados se abren en Excel y tienen el formato correcto. Además, el patrón inserta su propio complemento de Office dentro de la hoja de cálculo para que los clientes puedan acceder a sus servicios desde el contexto de Excel.

Los asociados de Microsoft que implementaron este patrón han visto una mayor satisfacción del cliente. También han visto un aumento significativo de la interacción con sus complementos al insertarlos en la hoja de cálculo de Excel. Se recomienda que, si tiene un sitio web para que los clientes trabajen con datos, considere la posibilidad de implementar este patrón en su propia solución.

Requisitos previos

  • Visual Studio 2022 o posterior. Agregue la carga de trabajo de desarrollo de Office/SharePoint al configurar Visual Studio.
  • Visual Studio Code.
  • Microsoft 365. Puede obtener un espacio aislado para desarrolladores gratuito que proporcione una suscripción renovable de 90 días Microsoft 365 E5 desarrollador. El espacio aislado para desarrolladores incluye una suscripción de Microsoft Azure que puede usar para los registros de aplicaciones en los pasos posteriores de este artículo. Si lo prefiere, puede usar una suscripción de Microsoft Azure independiente para los registros de aplicaciones. Obtenga una suscripción de prueba en Microsoft Azure.
  • Uno o varios archivos y carpetas en OneDrive en la cuenta de Microsoft 365.

Ejecución del código de ejemplo

El código de ejemplo de este artículo se denomina Crear una hoja de cálculo desde el sitio web, rellenarla con datos e insertar el complemento de Excel Para ejecutar el ejemplo, siga las instrucciones del léame.

Arquitectura de la solución

Secuencia de pasos para crear una hoja de cálculo, rellenarla con datos y abrirlo en una nueva pestaña del explorador para el usuario.

La solución descrita en este artículo agrega un botón Abrir en Microsoft Excel al sitio web e interactúa con Azure Functions y microsoft Graph API. La siguiente secuencia de eventos se produce cuando el usuario quiere abrir sus datos en una nueva hoja de cálculo de Excel.

  1. El usuario elige el botón Abrir en Microsoft Excel . La página web pasa los datos a una función de una aplicación Azure Functions.
  2. La función usa el SDK de Open XML para crear una hoja de cálculo de Excel en la memoria. Rellena la hoja de cálculo con los datos e inserta el complemento de Office.
  3. La función devuelve la hoja de cálculo como una cadena codificada en Base64 a la página web.
  4. La página web llama al Graph API de Microsoft para cargar la hoja de cálculo en OneDrive del usuario.
  5. Microsoft Graph devuelve la ubicación de la dirección URL web del nuevo archivo de hoja de cálculo.
  6. La página web abre una nueva pestaña del explorador para abrir la hoja de cálculo en la dirección URL web. La hoja de cálculo contiene los datos y el complemento.

Partes clave de la solución

La solución tiene dos proyectos que se compilan:

  • Una aplicación Azure Functions que contiene una FunctionCreateSpreadsheet función.
  • Un proyecto de aplicación web Node.js.

En las secciones siguientes se describen conceptos importantes y detalles de implementación para construir la solución. Puede encontrar una implementación de referencia completa en el código de ejemplo para obtener detalles de implementación adicionales.

Botón de Excel y interfaz de usuario de Fluent

Iconos de interfaz de usuario de Fluent para Word, Excel y PowerPoint.

Necesita un botón en el sitio web que cree la hoja de cálculo de Excel. Un procedimiento recomendado es usar la interfaz de usuario de Fluent para ayudar a los usuarios a realizar la transición entre productos de Microsoft. Siempre debe usar un icono de Office para indicar qué aplicación de Office se iniciará desde la página web. Para obtener más información, vea Iconos de marca de Office en el portal para desarrolladores de la interfaz de usuario de Fluent.

Inicio de sesión del usuario

El código de ejemplo se compila a partir del ejemplo de identidad de Microsoft denominado Vanilla JavaScript single-page application using MSAL.js to authenticate users to call Microsoft Graph (Aplicación de página única de JavaScript de Vanilla mediante MSAL.js para autenticar a los usuarios para llamar a Microsoft Graph). Todo el código de autenticación y la interfaz de usuario proceden de este ejemplo. Consulte este ejemplo para obtener más información sobre cómo escribir código para la autenticación y autorización. Para obtener una lista completa de ejemplos de identidad para una amplia gama de plataformas, consulte Plataforma de identidad de Microsoft ejemplos de código.

Creación de la hoja de cálculo con el SDK de Open XML

El código de ejemplo usa el SDK de Open XML para crear la hoja de cálculo. Dado que el SDK de Open XML usa .NET, se encapsula en una aplicación Azure Functions denominada FunctionCreateSpreadsheet. Puede llamar a esta función desde la aplicación web de Node.js. FunctionCreateSpreadsheet usa la SpreadsheetBuilder clase auxiliar para crear una hoja de cálculo en la memoria. El código se basa en Crear un documento de hoja de cálculo proporcionando un nombre de archivo (SDK de Open XML).

Rellenar la hoja de cálculo con datos

La FunctionCreateSpreadsheet función acepta un cuerpo JSON que contiene los datos de fila y columna. Esto se pasa al SpreadsheetBuilder.InsertData método que recorre en iteración todas las filas y columnas y las agrega a la hoja de cálculo.

Gran parte de la SpreadsheetBuilder clase contiene código generado por las herramientas de productividad del SDK de Open XML 2.5. Están disponibles en el vínculo del SDK de Open XML 2.5.

Insertar el complemento de Office dentro de la hoja de cálculo

La SpreadsheetBuilder clase también inserta el complemento de Script Lab dentro de la hoja de cálculo y configura para mostrarlo cuando se abre el documento.

El método SpreadsheetBuilder.GenerateWebExtensionPart1Content del archivo SpreadsheetBuilder.cs establece la referencia al identificador de Script Lab en Microsoft AppSource:

We.WebExtensionStoreReference webExtensionStoreReference1 = new We.WebExtensionStoreReference() { Id = "wa104380862", Version = "1.1.0.0", Store = "en-US", StoreType = "OMEX" };
  • El valor de StoreType es "OMEX", un alias para Microsoft AppSource.
  • El valor de Store es "en-US" que se encuentra en la sección de referencia cultural de Microsoft AppSource para Script Lab.
  • El valor id. es el identificador de recurso de Microsoft AppSource para Script Lab.

Puede cambiar estos valores para insertar su propio complemento de Office. Esto hace que sea reconocible para el usuario y aumenta la interacción con el complemento y los servicios web. Si el complemento se implementa a través de la implementación central, use los siguientes valores en su lugar.

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);

Para obtener más información sobre los valores alternativos para estos atributos, vea Abrir automáticamente un panel de tareas con un documento y [MS-OWEXML]: CT_OsfWebExtensionReference

Carga de la hoja de cálculo en OneDrive

Cuando la hoja de cálculo está totalmente construida, la FunctionCreateSpreadsheet función devuelve una versión de cadena codificada en Base64 de la hoja de cálculo a la aplicación web. A continuación, la aplicación web usa microsoft Graph API para cargar la hoja de cálculo en OneDrive del usuario. La aplicación web crea el archivo en \openinexcel\spreadsheet.xlsx, pero puede modificar el código para usar cualquier carpeta y nombre de archivo que prefiera.

Consideraciones adicionales para la solución

La solución de todos es diferente en términos de tecnologías y enfoques. Las siguientes consideraciones le ayudarán a planear cómo modificar la solución para abrir documentos e insertar el complemento de Office.

Leer propiedades personalizadas cuando se inicia el complemento

Al insertar el complemento dentro de la hoja de cálculo, puede incluir propiedades personalizadas. El SpreadsheetBuilder.cs archivo incluye código comentado que muestra cómo insertar un nombre de usuario si tiene una userName variable.

    // 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

Quite la marca de comentario del código y cámbielo para agregar las propiedades de cliente que necesite. En el complemento, use el método get de configuración de Office para recuperar una propiedad personalizada. En el ejemplo siguiente se muestra cómo obtener la propiedad de nombre de usuario de la hoja de cálculo.

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

Precaución

No almacene información confidencial en propiedades personalizadas, como tokens de autenticación o cadenas de conexión. Las propiedades de la hoja de cálculo no están cifradas ni protegidas.

Consulte Persist add-in state and settings (Conservar el estado y la configuración del complemento ) para obtener detalles completos sobre cómo leer propiedades personalizadas cuando se inicia el complemento.

Uso del inicio de sesión único

Para simplificar la autenticación, se recomienda que el complemento implemente el inicio de sesión único. Esto garantiza que el usuario no necesita iniciar sesión una segunda vez para acceder al complemento. Para obtener más información, vea Habilitar el inicio de sesión único para complementos de Office.

Vea también