Tutoriel d'incorporation de rapports dans des applications angulaires

Voici notre guide pour l'intégration de rapports dans des applications angulaires. Dans ce didacticiel pas à pas, vous apprendrez à intégrer des rapports dans des applications angulaires à l'aide de la visionneuse de rapports Telerik.

Dans ce didacticiel pas à pas, je vais vous montrer comment utiliser la visionneuse de rapports Telerik dans les applications angulaires. Ce didacticiel couvre les sujets suivants:

Qu'est-ce que Telerik Report Viewer?

Le Telerik Report Viewer est un pur widget HTML5 / JavaScript / CSS3 basé sur jQuery qui permet d'afficher les rapports Telerik dans une page HTML. La mise en page ou le style est basé sur des modèles HTML5 purs et des styles CSS3 et est entièrement personnalisable. Il prend en charge les navigateurs mobiles et de bureau. Les visionneuses de rapports, qui sont des composants de l'interface utilisateur, vous permettent d'afficher le document de rapport produit par le moteur de rapports dans l'interface utilisateur de l'application.

Comment peut-il être intégré à une application?

Pour intégrer la visionneuse de rapports Telerik dans une application angulaire , vous devrez suivre ces conditions préalables:

• Configuration requise pour la visionneuse de rapports angulaire
• Nœud
• CLI angulaire
• Un point de terminaison du service REST Telerik Reporting en cours d'exécution à utiliser dans une application angulaire (en savoir plus ici )

Prenez le livre électronique: un guide rapide des outils de création de rapports experts .NET

Comment implémenter la visionneuse de rapports dans Angular

La visionneuse de rapports Telerik fournit un composant qui peut être utilisé dans les applications angulaires. Voici les étapes pour utiliser ce composant dans Angular:

Étape 1: Créez une application Angular à l'aide de la CLI angulaire en exécutant la commande ci-dessous:

> ng new my-app

Étape 2: Installez le package npm Telerik Angular Report Viewer en exécutant la commande ci-dessous:

> npm install @ progress / telerik-angular-report-viewer

Étape 3: Ensuite, importez le TelerikReportingModule dans le module racine de votre application.

 importez {TelerikReportingModule} depuis '@ progress / telerik-angular-report-viewer';

// ajouter dans le tableau des importations
importations: [TelerikReportingModule]

Étape 4: Ajoutez le style de conteneur Report Viewer en utilisant une propriété de la classe AppComponent :

 viewerContainerStyle = {
    position: 'relative',
    largeur: '1000px',
    hauteur: '800px',
    à gauche: '5px',
    à droite: '5px',
    ['font-family']: "ms sans serif"
};

Étape 5: Ajoutez le composant fourni par Telerik Report Viewer (par exemple tr-viewer dans le modèle AppComponent ):

Remarque – Pour les options disponibles pour ce composant, Veuillez vérifier les détails ici .

Étape 6: La visionneuse de rapports utilise le style du thème d'interface utilisateur Kendo souhaité, veuillez donc ajouter les références ci-dessous aux fichiers CSS Less-based dans le head élément de index.html:

Étape 7: Enfin, nous avons implémenté le composant Telerik Report Viewer dans une application angulaire. Maintenant, il est temps d'exécuter l'application en exécutant la commande ci-dessous:

 ng serve -o 

Une fois cette commande exécutée, elle ouvrira le navigateur et la visionneuse de rapports affichera le rapport rendu comme la sortie comme ceci:

Si le rapport n'est pas affiché, veuillez vous assurer que le service Reporting REST est en cours d'exécution, en suivant les suggestions de ] cet article de la base de connaissances .

Voyons quels outils sont disponibles pour les utilisateurs dans la barre d'outils de la visionneuse de rapports.

Options de la barre d'outils supérieure:

1. Avant / arrière
2. Actualiser le rapport
3. Sélecteur de numéro de page [19659009] Activer / désactiver l'aperçu avant impression
4. Télécharger
   • PDF
   • Excel
   • Texte
   • TIFF
   • Web Archive
   • XPS Document
5. Zoom – Avant / Arrière
6. Basculer – Pleine page / Largeur de page
7. Rechercher dans le contenu du rapport
8. Basculer la zone de la carte du document
9. Imprimer le rapport
10. Basculer le filtre

Filtres : La capture d'écran ci-dessous montre les filtres sur le côté droit de la visionneuse de rapports. Sur la base de ces filtres, les données seront affichées sur le côté gauche.

Vous pouvez également télécharger cet exemple à partir de ici .

Enregistrer votre siège: rapports détaillés – Comment rationaliser les rapports avec facilité

] Conclusion

Dans cet article, nous avons discuté de ce qu'est la visionneuse de rapports Telerik, de ses prérequis et de la façon de l'utiliser dans une application angulaire, et de la barre d'outils de la visionneuse de rapports pour les utilisateurs. Si vous avez des suggestions ou des questions concernant cet article, veuillez me contacter.

"Apprenez-le, partagez-le."

Vous avez essayé Telerik DevCraft?

Vous pouvez choisir Telerik Reporting et ] Telerik Report Server en tant que produits individuels ou profitez-en dans le cadre des offres groupées Telerik DevCraft.

Essayez Telerik DevCraft

Telerik DevCraft est la meilleure collection d'outils de développement logiciel parmi les technologies .NET et JavaScript, qui comprend des composants d'interface utilisateur modernes, riches en fonctionnalités et conçus par des professionnels pour les applications Web, de bureau et mobiles, des solutions de gestion de rapports et de rapports, des bibliothèques de traitement de documents, des tests automatisés et des simulations outils des suites Telerik et Kendo UI. DevCraft vous fournira tout ce dont vous avez besoin pour fournir des applications exceptionnelles en moins de temps et avec moins d'efforts. Avec le soutien de notre équipe de support légendaire, qui se compose des développeurs qui créent les produits, et une tonne de ressources et de formations, vous pouvez être assuré que vous avez un partenaire stable sur lequel compter pour vos défis quotidiens tout au long de votre parcours de développement logiciel. [19659060]

Source link