Share via

Créer une feuille de calcul Excel à partir de votre page web, la remplir avec des données et incorporer votre complément Office

  • Article

Diagramme illustrant la façon dont le bouton Excel de votre page web ouvre un nouveau document Excel et ouvre automatiquement votre complément dans le volet droit.

Les partenaires Microsoft avec des applications web SaaS savent que leurs clients souhaitent souvent ouvrir leurs données à partir d’une page web dans une feuille de calcul Excel. Ils utilisent Excel pour effectuer une analyse des données ou d’autres types de calcul de nombre. Ensuite, ils chargent les données sur le site web.

Au lieu de plusieurs étapes pour exporter les données du site web vers un fichier .csv, importer le fichier .csv dans Excel, utiliser les données, puis les exporter à partir d’Excel et les charger à nouveau sur le site web, nous pouvons simplifier ce processus en un clic sur un bouton.

Cet article explique comment ajouter un bouton Excel à votre site web. Lorsqu’un client choisit le bouton, il crée automatiquement une feuille de calcul avec les données demandées, la charge sur oneDrive du client et l’ouvre dans Excel sous un nouvel onglet de navigateur. En un clic, les données demandées sont ouvertes dans Excel et mises en forme correctement. En outre, le modèle incorpore votre propre complément Office dans la feuille de calcul afin que les clients puissent toujours accéder à vos services à partir du contexte d’Excel.

Les partenaires Microsoft qui ont implémenté ce modèle ont constaté une augmentation de la satisfaction des clients. Ils ont également constaté une augmentation significative de l’engagement avec leurs compléments en les incorporant dans la feuille de calcul Excel. Si vous disposez d’un site web permettant aux clients d’utiliser des données, nous vous recommandons d’implémenter ce modèle dans votre propre solution.

Conditions préalables

  • Visual Studio 2022 ou version ultérieure. Ajoutez la charge de travail développement Office/SharePoint lors de la configuration de Visual Studio.
  • Visual Studio Code.
  • Microsoft 365. Vous pouvez obtenir un bac à sable de développeur gratuit qui fournit un abonnement renouvelable de 90 jours Microsoft 365 E5 développeur. Le bac à sable développeur inclut un abonnement Microsoft Azure que vous pouvez utiliser pour les inscriptions d’applications dans les étapes ultérieures de cet article. Si vous préférez, vous pouvez utiliser un abonnement Microsoft Azure distinct pour les inscriptions d’applications. Obtenez un abonnement d’essai sur Microsoft Azure.
  • Un ou plusieurs fichiers et dossiers sur OneDrive dans le compte Microsoft 365.

Exécuter l’exemple de code

L’exemple de code de cet article est nommé Créer une feuille de calcul à partir de votre site web, le remplir avec des données et incorporer votre complément Excel Pour exécuter l’exemple, suivez les instructions du fichier Lisez-moi.

Architecture de la solution

Séquence d’étapes pour créer une feuille de calcul, la remplir avec des données et l’ouvrir dans un nouvel onglet de navigateur pour l’utilisateur.

La solution décrite dans cet article ajoute un bouton Ouvrir dans Microsoft Excel au site web et interagit avec Azure Functions et microsoft API Graph. La séquence d’événements suivante se produit lorsque l’utilisateur souhaite ouvrir ses données dans une nouvelle feuille de calcul Excel.

  1. L’utilisateur choisit le bouton Ouvrir dans Microsoft Excel . La page web transmet les données à une fonction dans une application Azure Functions.
  2. La fonction utilise le Kit de développement logiciel (SDK) Open XML pour créer une feuille de calcul Excel en mémoire. Il remplit la feuille de calcul avec les données et incorpore votre complément Office.
  3. La fonction retourne la feuille de calcul sous la forme d’une chaîne encodée en Base64 à la page web.
  4. La page web appelle microsoft API Graph pour charger la feuille de calcul dans le OneDrive de l’utilisateur.
  5. Microsoft Graph renvoie l’emplacement de l’URL web du nouveau fichier de feuille de calcul.
  6. La page web ouvre un nouvel onglet de navigateur pour ouvrir la feuille de calcul à l’URL web. La feuille de calcul contient les données et votre complément.

Parties clés de la solution

La solution comporte deux projets que vous générez :

  • Application Azure Functions contenant une FunctionCreateSpreadsheet fonction.
  • Un projet d’application web Node.js.

Les sections suivantes décrivent les concepts importants et les détails d’implémentation pour la construction de la solution. Vous trouverez une implémentation de référence complète dans l’exemple de code pour obtenir des détails supplémentaires sur l’implémentation.

Bouton Excel et interface utilisateur Fluent

Icônes de l’interface utilisateur Fluent pour Word, Excel et PowerPoint.

Vous avez besoin d’un bouton sur le site web qui crée la feuille de calcul Excel. Une bonne pratique consiste à utiliser l’interface utilisateur Fluent pour aider vos utilisateurs à passer d’un produit Microsoft à l’autre. Vous devez toujours utiliser une icône Office pour indiquer l’application Office qui sera lancée à partir de votre page web. Pour plus d’informations, consultez Icônes de marque Office sur le portail des développeurs fluent UI.

Connecter l’utilisateur

L’exemple de code est généré à partir de l’exemple d’identité Microsoft nommé Application monopage JavaScript Vanilla utilisant MSAL.js pour authentifier les utilisateurs pour appeler Microsoft Graph. Tout le code d’authentification et l’interface utilisateur proviennent de cet exemple. Reportez-vous à cet exemple pour plus d’informations sur l’écriture de code pour l’authentification et l’autorisation. Pour obtenir la liste complète des exemples d’identité pour un large éventail de plateformes, consultez Plateforme d'identités Microsoft exemples de code.

Créer la feuille de calcul avec le Kit de développement logiciel (SDK) Open XML

L’exemple de code utilise le Kit de développement logiciel (SDK) Open XML pour créer la feuille de calcul. Étant donné que le Kit de développement logiciel (SDK) Open XML utilise .NET, il est encapsulé dans une application Azure Functions nommée FunctionCreateSpreadsheet. Vous pouvez appeler cette fonction à partir de votre application web Node.js. FunctionCreateSpreadsheet utilise la classe d’assistance SpreadsheetBuilder pour créer une feuille de calcul en mémoire. Le code est basé sur Créer un document de feuille de calcul en fournissant un nom de fichier (Kit de développement logiciel (SDK Open XML).

Remplir la feuille de calcul avec des données

La FunctionCreateSpreadsheet fonction accepte un corps JSON contenant les données de ligne et de colonne. Cela est passé à la SpreadsheetBuilder.InsertData méthode qui itère dans toutes les lignes et colonnes et les ajoute à la feuille de calcul.

Une grande partie de la classe contient du SpreadsheetBuilder code qui a été généré par les outils de productivité du Kit de développement logiciel (SDK) Open XML 2.5. Celles-ci sont disponibles sur le lien pour le Kit de développement logiciel (SDK) Open XML 2.5.

Incorporer votre complément Office dans la feuille de calcul

La SpreadsheetBuilder classe incorpore également le complément Script Lab à l’intérieur de la feuille de calcul et s’affiche à l’ouverture du document.

La méthode SpreadsheetBuilder.GenerateWebExtensionPart1Content dans le fichier SpreadsheetBuilder.cs définit la référence à l’ID de Script Lab dans Microsoft AppSource :

We.WebExtensionStoreReference webExtensionStoreReference1 = new We.WebExtensionStoreReference() { Id = "wa104380862", Version = "1.1.0.0", Store = "en-US", StoreType = "OMEX" };
  • La valeur StoreType est « OMEX », un alias pour Microsoft AppSource.
  • La valeur du Store est « en-US » dans la section Culture Microsoft AppSource pour Script Lab.
  • La valeur Id est l’ID de ressource Microsoft AppSource pour Script Lab.

Vous pouvez modifier ces valeurs pour incorporer votre propre complément Office. Cela le rend détectable pour l’utilisateur et augmente l’engagement avec votre complément et les services web. Si votre complément est déployé via un déploiement central, utilisez les valeurs suivantes à la place.

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

Pour plus d’informations sur les valeurs alternatives pour ces attributs, consultez Ouvrir automatiquement un volet Office avec un document et [MS-OWEXML] : CT_OsfWebExtensionReference

Charger la feuille de calcul sur OneDrive

Lorsque la feuille de calcul est entièrement construite, la FunctionCreateSpreadsheet fonction retourne une version de chaîne encodée en Base64 de la feuille de calcul à l’application web. Ensuite, l’application web utilise le API Graph Microsoft pour charger la feuille de calcul dans le OneDrive de l’utilisateur. L’application web crée le fichier sur \openinexcel\spreadsheet.xlsx, mais vous pouvez modifier le code pour utiliser n’importe quel dossier et nom de fichier de votre choix.

Considérations supplémentaires pour votre solution

La solution de chacun est différente en termes de technologies et d’approches. Les considérations suivantes vous aideront à planifier la modification de votre solution pour ouvrir des documents et incorporer votre complément Office.

Lire les propriétés personnalisées au démarrage de votre complément

Lorsque vous incorporez votre complément dans la feuille de calcul, vous pouvez inclure des propriétés personnalisées. Le SpreadsheetBuilder.cs fichier inclut du code commenté qui montre comment insérer un nom d’utilisateur si vous avez une 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

Supprimez les marques de commentaire du code et modifiez-le pour ajouter les propriétés client dont vous avez besoin. Dans votre complément, utilisez la méthode get des paramètres Office pour récupérer une propriété personnalisée. L’exemple suivant montre comment obtenir la propriété de nom d’utilisateur à partir de la feuille de calcul.

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

Attention

Ne stockez pas d’informations sensibles dans des propriétés personnalisées telles que des jetons d’authentification ou des chaînes de connexion. Les propriétés de la feuille de calcul ne sont pas chiffrées ou protégées.

Pour plus d’informations sur la lecture des propriétés personnalisées au démarrage de votre complément, consultez Conserver l’état et les paramètres du complément.

Utiliser l’authentification unique

Pour simplifier l’authentification, nous vous recommandons d’implémenter l’authentification unique dans votre complément. Cela garantit que l’utilisateur n’a pas besoin de se connecter une deuxième fois pour accéder à votre complément. Pour plus d’informations, voir Activer l’authentification unique pour les compléments Office

Voir aussi