Fermer

décembre 6, 2022

5 choses que vous ne saviez pas sur le composant d’exportation Excel de KendoReact4 minutes de lecture


Plongeons-nous dans cinq caractéristiques de ce héros puissant et méconnu d’un composant que vous ne connaissiez peut-être pas.

Dans cet article de notre KendoRéagir série d’introduction aux composants, nous examinons l’un des composants KendoReact les moins connus : Exportation Excel!

Étant donné que Excel Export n’est pas un composant typique de l’interface utilisateur, il a peut-être volé sous votre radar… jusqu’à aujourd’hui, bien sûr ! Ce composant puissant et hautement personnalisable est conçu pour permettre à vos utilisateurs d’exporter des données JSON depuis votre application vers un .xlsx dossier. C’est parfait pour les utilisateurs qui ont besoin de manipuler les données localement afin de créer des visualisations de données, de conserver des enregistrements personnels/extraire des rapports, de capturer un instantané des données à un moment précis, et plus encore !

S’il s’agit d’un composant KendoReact que vous n’avez pas encore examiné de près, ne vous inquiétez pas, nous allons examiner cinq choses que Excel Export peut faire et que vous ne connaissiez peut-être pas.

1. Masquer ou verrouiller les colonnes dans le fichier exporté

Saviez-vous que vous pouvez définir des colonnes dans votre fichier exporté pour qu’elles soient automatiquement verrouillées ou masquées ? En spécifiant dans les propriétés de votre composant si vous souhaitez qu’une colonne soit masquée ou verrouillée, vous pouvez contrôler à l’avance comment ce composant sera exporté.

Masquer une colonne l’exclura du contenu exporté, tandis que verrouiller une colonne l’épinglera en place afin qu’il ne bouge pas lorsque l’utilisateur fait défiler le document exporté. Les deux sont des moyens incroyablement utiles pour vous de formater vos données pour une utilisation optimale après l’exportation.

Une capture d'écran d'Excel montrant une colonne en position verrouillée en haut de la page

Les en-têtes sont importants dans votre document Excel exporté, afin que vous puissiez organiser et regrouper des données similaires dans la feuille de calcul. Cependant, aucun de ces styles ne sera automatiquement intégré à votre fichier de données brutes. Heureusement, le composant Excel Export en tient compte et inclut plusieurs façons de personnaliser les cellules où le contenu de votre en-tête apparaîtra dans le document fini !

Tu peux styliser les cellules elles-mêmes (modification de la couleur, de la couleur d’arrière-plan, de la taille de la police, etc.) en utilisant le
headerCellOptions propriété de la ExcelExportColumn ou ExcelExportColumnGroup Composants.

Ou tu peux ajouter des cellules de remplissage d’en-têtepour aligner les en-têtes et les valeurs des colonnes lorsque les données sont regroupées, avec headerPaddingCellOptions propriété de la ExcelExport composant.

Enfin, vous pouvez spécifier des options personnalisées pour un cellule d’en-tête de groupe d’une colonne avec le groupHeaderCellOptions propriété de la ExcelExportColumn composant.

Entre ces trois options, vous trouverez tout ce dont vous avez besoin (et probablement plus) pour donner à votre document Excel exporté un aspect professionnel et soigné.

3. Filtrage

Si vous savez que vos utilisateurs devront manipuler les données d’une certaine manière, vous pouvez continuer et intégrer cela automatiquement dans votre fichier exporté. Par exemple, si vos utilisateurs veulent pouvoir filtrer les colonnesvous pouvez exporter le fichier Excel avec celui déjà activé en définissant le filterable propriété de la ExcelExport composant à vrai!

Une capture d'écran d'Excel, montrant l'option de filtre activée pour une colonne avec la boîte de dialogue de filtrage ouverte

4. Enregistrement de fichiers à distance

Voici un **vraiment** fonctionnalité intéressante que vous ne connaissiez peut-être pas : le composant Excel Export vous permettra d’envoyer votre fichier Excel généré à un service distant ! Pour enregistrer un fichier sur le serveur, vous devrez utiliser le toDataURL() méthode pour obtenir le contenu encodé en base64, puis publiez ce contenu sur le serveur.

Comme pour toutes les fonctionnalités de tous les composants, nos documents ont un excellent exemple pour vous aider à démarrer! Copiez le code directement dans votre application, modifiez-le au besoin et implémentez cette fonctionnalité rapidement et facilement !

5. Chargement

Enfin, si vous disposez d’un ensemble de données très volumineux dont vous savez qu’il faudra du temps pour l’exporter, saviez-vous qu’il existe support de chargeur intégré pouvez-vous ajouter au composant d’exportation Excel ? C’est vrai!

C’est aussi simple que d’importer notre Composant chargeur et en l’ajoutant avec une valeur initiale de falsepuis en basculant la valeur du chargeur sur true lorsque l’utilisateur clique sur le bouton d’exportation ! Ensuite, il vous suffit de gérer le onExportComplete événement pour remettre le chargement à false une fois l’export terminé, il peut donc s’exécuter à nouveau si l’utilisateur déclenche un nouveau téléchargement du fichier.

Un gif montrant la boucle d'animation du composant KendoReact Loader

Prêt à l’essayer ?

Voilà, cinq fonctionnalités que vous ne connaissiez peut-être pas… dans un composant KendoReact que vous ne connaissiez peut-être pas non plus ! Si vous gérez de grands ensembles de données dans votre application auxquels il serait avantageux pour vos utilisateurs d’avoir accès, envisagez d’ajouter le Composant d’exportation Excel et leur donner les moyens de manipuler et d’explorer les données dans un programme avec lequel ils sont déjà à l’aise.

Et, comme toujours, si vous n’utilisez pas déjà la bibliothèque KendoReact, vous pouvez essayez-le entièrement gratuitement pendant 30 jours! Essayez-le et voyez à quel point il facilite et accélère le développement d’applications React.




Source link

décembre 6, 2022