Les polices jouent un rôle important dans la représentation visuelle des applications   et des rapports Web. Par défaut, JavaScript permet aux développeurs de personnaliser des éléments tels que la taille, l'épaisseur et le style de la police et même d'inclure des types de police personnalisés. La possibilité pour les développeurs de travailler avec et de personnaliser les polices leur permet d'améliorer à la fois l'esthétique et la lisibilité des informations qu'ils présentent. JavaScript  Pour correspondre à la flexibilité de JavaScript, ActiveReportsJS permet aux utilisateurs de personnaliser fortement le texte des rapports. Dans cet article, nous nous concentrerons sur la façon dont vous pouvez tirer parti de la capacité du concepteur ActiveReportsJS à personnaliser les polices, en couvrant les sujets suivants :  Les bases des polices  Configuration de l'application Designer autonome  Configuration des applications basées sur ActiveReportsJS  Configuration du composant Report Designer  Les bases des polices  Tous les composants ActiveReportsJS fonctionnent dans un environnement de navigateur Web :  Le   est construit avec   , qui utilise Chromium pour afficher l'interface utilisateur. concepteur de rapports autonome Electron  Les composants   et   font partie d'une application Web qui s'exécute dans le navigateur sur l'ordinateur d'un utilisateur. JavaScript Report Viewer Designer  Les filtres d'exportation PDF, de données tabulaires et HTML utilisent un environnement de navigateur Web pour mesurer le contenu du rapport.  Un rapport typique consiste en un contenu textuel que le navigateur restitue à l'aide de formes appelées glyphes. Les ressources de polices contiennent des informations qui mappent les codes de caractères aux glyphes représentant ces caractères. Par conséquent, les navigateurs doivent accéder aux ressources de polices pour afficher le texte comme prévu.  Tout le contenu textuel dans ActiveReportsJS possède plusieurs propriétés de police, notamment :    : ID de police, c'est-à-dire Arial, Calabri ou Times New Roman. Famille de polices    : Normal ou italique. Style de police    : fin, extra léger, normal, moyen, semi-gras, gras, extra gras, lourd. Poids de la police  Une combinaison unique de ces trois propriétés est appelée   . Une famille de polices se compose généralement de plusieurs polices, qui sont (normalement) représentées par plusieurs fichiers. Font Face  Par exemple, la famille de polices   comporte six polices différentes :  Calibri  Lorsque ActiveReportsJS génère un rapport, il traduit ces propriétés de police en propriétés de style CSS font-family, font-style et font-weight. Il s'appuie sur un navigateur pour résoudre les ressources de polices associées et extraire les glyphes requis. Le navigateur dispose de deux manières d'accéder aux ressources de polices : localement, sur le système exécuté par un navigateur ou par téléchargement.  Les ressources de polices téléchargeables sont faciles à gérer ; tous les navigateurs modernes les prennent en charge et garantissent la sortie cohérente du contenu textuel dans tous les environnements. En outre, l'exportation PDF ActiveReportsJS nécessite des polices téléchargeables car elle intègre leurs sous-ensembles dans un document PDF. Par conséquent, le meilleur moyen de garantir une sortie de rapport cohérente dans tous les environnements consiste à configurer les composants ActiveReportsJS pour accéder aux ressources de polices téléchargeables.  Avant de commencer, nous devons décider quelles familles de polices nous souhaitons utiliser pour nos rapports. Il peut s'agir de polices standard comme Arial, Times New Roman ou Helvetica. Ou bien, il peut s’agir de n’importe quel nombre de polices Web. Pour notre exemple, nous utiliserons la police Montserrat ; c'est la même police que nous utilisons pour nos rapports de démonstration.  Dans tous les cas, assurez-vous de disposer de tous les fichiers de polices pour toutes les familles de polices que vous prévoyez d’utiliser. ActiveReportsJS prend en charge les formats de police suivants :   Configuration du concepteur de rapports autonome  Pour ajouter une famille de polices au concepteur autonome, vous devez d'abord accéder au dossier contenant le fichier de configuration de police ActiveReportsJS. Ceux-ci se trouvent aux emplacements suivants, en fonction de votre système d'exploitation :    : %AppData%\ActiveReportsJS Designer\fontsConfig.json Windows    : ~/Bibliothèque/Application Support/ActiveReportsJS Designer/fontsConfig.json macOS    : ~/.config/ActivereportsJS Designer/fontsConfig.json Linux  À cet emplacement, créez un dossier nommé   et copiez tous les fichiers de toutes les polices que vous prévoyez d'utiliser dans ce dossier. Polices  Ensuite, ouvrez le fichier   dans l'éditeur de texte de votre choix. Ce fichier contient des descripteurs de races de polices qu'un auteur de rapport utilisera pour le contenu textuel. Dans la propriété   , spécifiez le chemin absolu vers le dossier parent du répertoire   . Remplacez les éléments par défaut du tableau descripteurs par les descripteurs des polices souhaitées. fontsConfig.json path Fonts  Chaque descripteur inclut les propriétés suivantes :   Par exemple, pour autoriser les caractères Regular, Italic et Bols de la police   , vous utiliserez les descripteurs suivants : Montserrat   { "name": "Montserrat", "weight": "400", "style": "normal", "source": "Fonts/Montserrat/Montserrat-Regular.ttf" }, { "name": "Montserrat", "weight": "400", "style": "italic", "source": "Fonts/Montserrat/Montserrat-Italic.ttf" }, { "name": "Montserrat", "weight": "700", "style": "normal", "source": "Fonts/Montserrat/Montserrat-Bold.ttf" }  Exécutez l'application de conception autonome, ajoutez un TextBox dans le corps d'un rapport et assurez-vous que vous pouvez définir sa propriété   sur l'une des polices que vous avez énumérées dans le fichier   et que toutes les polices sont correctement affichées. Font Family fontsConfig.json  Configuration des applications basées sur ActiveReportsJS  Une application qui affiche des rapports dans la visionneuse de rapports JavaScript, exporte des rapports au format PDF ou héberge le composant de conception de rapports doit utiliser la même configuration que celle que vous avez créée pour l'application de conception autonome. Le moyen le plus simple d'y parvenir consiste à copier le dossier   et le fichier   dans le dossier des ressources statiques de votre application. Fonts fontsConfig.json  Ce dossier varie selon les frameworks frontaux. Voici quelques exemples:    : utilise la configuration des actifs ; si le dossier   et le fichier   sont copiés dans le dossier Assets, modifiez les propriétés source des descripteurs de police dans le fichier   afin qu'ils commencent par Assets. Par exemple: Angulaire Fonts fontsConfig.json fontsConfig.json  { "name": "Montserrat", "weight": "900", "style": "italic", "source": "assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf" }    : Utilise le dossier public pour les applications créées avec create-react-app. React    : utilise la gestion des actifs statiques. Vue  Enfin, l'application doit appeler la méthode   de l'objet FontStore avec l'URL du fichier   . Ce code doit être exécuté avant que l'application ne commence à afficher ou à exporter des rapports. Notez que la méthode   est asynchrone et renvoie un objet   . registerFonts fontsConfig registerFonts Promise  Le code qui appelle cette méthode peut également attendre que cette promesse renvoyée soit résolue avant de charger les rapports dans le composant de visualisation ou de les exporter.  Pour les applications purement JavaScript, le code ressemblera à ceci :   <script src="https://cdn.grapecity.com/activereportsjs/2.2.0/dist/ar-js-core.js"></script> <script> GC.ActiveReports.Core.FontStore.registerFonts( "/resources/fontsConfig.json" // replace the URL with the actual one ) </script>  Pour les applications   ,   et Vue : Angular React   import { Core } from "@grapecity/activereports"; Core.FontStore.registerFonts("/assets/fontConfig.json") // replace the URL with the actual one  Vous pouvez trouver des exemples de ce code dans nos   . démos en direct  Configuration du composant Report Designer  Enfin, pour garantir que le composant du concepteur de rapports affiche uniquement les polices enregistrées, définissez la propriété   de l'instance du concepteur sur enregistré. fontSet  De plus, si vous souhaitez vous assurer que les éléments de rapport nouvellement ajoutés possèdent l'une des polices enregistrées par défaut, vous pouvez utiliser la fonctionnalité   . Modèle d'initialisation personnalisé  Conclusion  Et avec cela, nous sommes arrivés à la fin de l’article. Comme nous l'avons évoqué, les polices constituent un moyen puissant pour les développeurs d'améliorer l'esthétique et la lisibilité. Dans cet article, nous avons montré à quel point il est facile d'incorporer des polices personnalisées dans vos rapports via le concepteur et la visionneuse de rapports ActiveReportsJS.  Bon codage !  Également publié   . ici

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Learn More About MESCIUS' Line of Products!

Cet audio est produit dans la langue originale de l'histoire !

Utilisation de polices personnalisées dans les rapports JavaScript

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Des forums aux flux : comment les algorithmes des réseaux sociaux façonnent l'interaction numérique

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Des forums aux flux : comment les algorithmes des réseaux sociaux façonnent l'interaction numérique

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Nomades numériques, écoutez : ce que vous devez savoir sur le nouveau visa DTV de la Thaïlande

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps