Utilisation de polices personnalisées dans les rapports JavaScript

Les polices jouent un rôle important dans la représentation visuelle des applications JavaScript 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.

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 concepteur de rapports autonome est construit avec Electron , qui utilise Chromium pour afficher l'interface utilisateur.

• Les composants JavaScript Report Viewer et Designer font partie d'une application Web qui s'exécute dans le navigateur sur l'ordinateur d'un utilisateur.

• 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 :

• Famille de polices : ID de police, c'est-à-dire Arial, Calabri ou Times New Roman.
• Style de police : Normal ou italique.
• Poids de la police : fin, extra léger, normal, moyen, semi-gras, gras, extra gras, lourd.

Une combinaison unique de ces trois propriétés est appelée Font Face . Une famille de polices se compose généralement de plusieurs polices, qui sont (normalement) représentées par plusieurs fichiers.

Par exemple, la famille de polices Calibri comporte six polices différentes :

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 :

• Windows : %AppData%\ActiveReportsJS Designer\fontsConfig.json

• macOS : ~/Bibliothèque/Application Support/ActiveReportsJS Designer/fontsConfig.json

• Linux : ~/.config/ActivereportsJS Designer/fontsConfig.json

  
  

À cet emplacement, créez un dossier nommé Polices et copiez tous les fichiers de toutes les polices que vous prévoyez d'utiliser dans ce dossier.

Ensuite, ouvrez le fichier fontsConfig.json 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é path , spécifiez le chemin absolu vers le dossier parent du répertoire Fonts . Remplacez les éléments par défaut du tableau descripteurs par les descripteurs des polices souhaitées.

Chaque descripteur inclut les propriétés suivantes :

Par exemple, pour autoriser les caractères Regular, Italic et Bols de la police Montserrat , vous utiliserez les descripteurs suivants :

 { "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é Font Family sur l'une des polices que vous avez énumérées dans le fichier fontsConfig.json et que toutes les polices sont correctement affichées.

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 Fonts et le fichier fontsConfig.json dans le dossier des ressources statiques de votre application.

Ce dossier varie selon les frameworks frontaux. Voici quelques exemples:

• Angulaire : utilise la configuration des actifs ; si le dossier Fonts et le fichier fontsConfig.json sont copiés dans le dossier Assets, modifiez les propriétés source des descripteurs de police dans le fichier fontsConfig.json afin qu'ils commencent par Assets. Par exemple:

  { "name": "Montserrat", "weight": "900", "style": "italic", "source": "assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf" }

• React : Utilise le dossier public pour les applications créées avec create-react-app.

• Vue : utilise la gestion des actifs statiques.

  
  

Enfin, l'application doit appeler la méthode registerFonts de l'objet FontStore avec l'URL du fichier fontsConfig . Ce code doit être exécuté avant que l'application ne commence à afficher ou à exporter des rapports. Notez que la méthode registerFonts est asynchrone et renvoie un objet 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 Angular , React et Vue :

 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é fontSet de l'instance du concepteur sur enregistré.

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 !