Las fuentes juegan un papel importante en la representación visual de aplicaciones e informes basados en web. De forma predeterminada, JavaScript permite a los desarrolladores personalizar aspectos como el tamaño, el peso y el estilo de la fuente e incluso incluir tipos de fuente personalizados. La capacidad de los desarrolladores para trabajar y personalizar fuentes les permite mejorar tanto la estética como la legibilidad de la información que presentan. JavaScript Para igualar la flexibilidad de JavaScript, ActiveReportsJS permite a los usuarios personalizar en gran medida el texto de los informes. En este artículo, nos centraremos en cómo aprovechar la capacidad de ActiveReportsJS Designer para personalizar fuentes y cubriremos los siguientes temas: Los conceptos básicos de las fuentes Configuración de la aplicación de diseñador independiente Configuración de aplicaciones basadas en ActiveReportsJS Configuración del componente Diseñador de informes Los conceptos básicos de las fuentes Todos los componentes de ActiveReportsJS operan dentro de un entorno de navegador web: El está creado con , que utiliza Chromium para mostrar la interfaz de usuario. Diseñador de informes independiente Electron Los componentes y son partes de una aplicación web que se ejecuta en el navegador de la máquina de un usuario. JavaScript Report Viewer Designer Los filtros de exportación de PDF, datos tabulares y HTML utilizan un entorno de navegador web para medir el contenido del informe. Un informe típico consta de contenido textual que el navegador representa mediante formas llamadas glifos. Los recursos de fuentes contienen información que asigna códigos de caracteres a glifos que representan estos caracteres. Por lo tanto, los navegadores necesitan acceso a los recursos de fuentes para mostrar el texto como se esperaba. Todo el contenido textual en ActiveReportsJS tiene varias propiedades de fuente, que incluyen: : el ID de la fuente, es decir, Arial, Calabri o Times New Roman. Familia de fuentes : Normal o cursiva. Estilo de fuente : Delgada, Extraligera, Normal, Mediana, Seminegrita, Negrita, Extranegrita, Pesada. Peso de fuente Una combinación única de estas tres propiedades se denomina . Una familia de fuentes normalmente consta de varias fuentes, que (normalmente) están representadas por varios archivos. Font Face Por ejemplo, la familia de fuentes tiene seis tipos de fuentes diferentes: Calibri Cuando ActiveReportsJS genera un informe, traduce estas propiedades de fuente a propiedades de estilo CSS de familia de fuentes, estilo de fuente y peso de fuente. Se basa en un navegador para resolver los recursos de fuentes asociados y extraer los glifos necesarios. El navegador tiene dos formas de acceder a los recursos de fuentes; localmente, en el sistema que ejecuta un navegador o mediante descarga. Los recursos de fuentes descargables son fáciles de mantener; Todos los navegadores modernos los admiten y garantiza la salida consistente de contenido textual en todos los entornos. Además, ActiveReportsJS PDF Export requiere fuentes descargables porque incrusta sus subconjuntos en un documento PDF. Por lo tanto, la mejor manera de garantizar una producción de informes coherente en todos los entornos es configurar los componentes ActiveReportsJS para acceder a recursos de fuentes descargables. Antes de comenzar, debemos decidir qué familias de fuentes queremos utilizar para nuestros informes. Podrían ser fuentes estándar como Arial, Times New Roman o Helvetica. O podría ser cualquier cantidad de fuentes web. Para nuestro ejemplo, usaremos la fuente Montserrat; Esta es la misma fuente que utilizamos para nuestros informes de demostración. En cualquier caso, asegúrese de tener todos los archivos de fuentes para todas las familias de fuentes que planea usar. ActiveReportsJS admite los siguientes formatos de fuente: Configurar el Diseñador de informes independiente Para agregar una familia de fuentes al diseñador independiente, primero deberá navegar a la carpeta que contiene el archivo de configuración de fuentes ActiveReportsJS. Estos se encuentran en las siguientes ubicaciones, según su sistema operativo: : %AppData%\ActiveReportsJS Designer\fontsConfig.json Windows : ~/Biblioteca/Soporte de aplicaciones/ActiveReportsJS Designer/fontsConfig.json macOS : ~/.config/ActivereportsJS Designer/fontsConfig.json Linux En esta ubicación, cree una carpeta llamada y copie todos los archivos de todas las fuentes que planea usar en esta carpeta. Fuentes Luego, abra el archivo en el editor de texto de su elección. Este archivo contiene descriptores de tipos de fuentes que el autor de un informe utilizará para el contenido textual. En la propiedad , especifique la ruta absoluta a la carpeta principal del directorio . Reemplace los elementos predeterminados de la matriz de descriptores con los descriptores de las fuentes deseadas. fontsConfig.json de ruta de fuentes Cada descriptor incluye las siguientes propiedades: Por ejemplo, para permitir las caras Regular, Cursiva y Negrita de la fuente , utilizaría los siguientes descriptores: 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" } Ejecute la aplicación de diseño independiente, agregue un cuadro de texto en el cuerpo de un informe y asegúrese de que puede establecer su propiedad en una de las fuentes que enumeró en el archivo y que todas las fuentes se muestran correctamente. Familia de fuentes fontsConfig.json Configuración de aplicaciones basadas en ActiveReportsJS Una aplicación que muestra informes en el visor de informes de JavaScript, exporta informes a un PDF o aloja el componente del diseñador de informes debe usar la misma configuración que creó para la aplicación de diseño independiente. La forma más sencilla de lograrlo es copiar la carpeta y el archivo a la carpeta de activos estáticos de su aplicación. Fuentes fontsConfig.json Esta carpeta varía según los diferentes marcos de aplicaciones para el usuario. Aquí están algunos ejemplos: : utiliza la configuración de activos; Si la carpeta y el archivo se copian en la carpeta de activos, modifique las propiedades de origen de los descriptores de fuentes en el archivo para que comiencen con los activos. Por ejemplo: Angular Fuentes fontsConfig.json fontsConfig.json { "nombre": "Montserrat", "peso": "900", "estilo": "italic", "fuente": "assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf" } : utiliza la carpeta pública para aplicaciones creadas con create-react-app. React : utiliza el manejo de activos estáticos. Vue Finalmente, la aplicación debe llamar al método del objeto FontStore con la URL del archivo . Este código debe ejecutarse antes de que la aplicación comience a mostrar o exportar informes. Tenga en cuenta que el método es asíncrono y devuelve un objeto . RegisterFonts fontsConfig RegisterFonts Promise El código que llama a este método también puede esperar hasta que la Promesa devuelta se resuelva antes de cargar informes en el componente del visor o exportarlos. Para aplicaciones de JavaScript puro, el código se verá así: <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> Para aplicaciones , y Vue: Angular React import { Core } from "@grapecity/activereports"; Core.FontStore.registerFonts("/assets/fontConfig.json") // replace the URL with the actual one Puede encontrar ejemplos de este código en nuestras . demostraciones en vivo Configuración del componente Diseñador de informes Finalmente, para asegurarse de que el componente del diseñador de informes muestre solo las fuentes registradas, establezca la propiedad de la instancia del diseñador en registrada. fontSet Además, si desea asegurarse de que los elementos del informe recién agregados tengan una de las fuentes registradas de forma predeterminada, puede utilizar la función . Plantilla de inicio personalizada Conclusión Y con esto llegamos al final del artículo. Como hemos comentado, las fuentes son una forma poderosa para que los desarrolladores mejoren la estética y la legibilidad. En este artículo, mostramos lo fácil que es incorporar fuentes personalizadas en sus informes a través del Visor y Diseñador de informes ActiveReportsJS. ¡Feliz codificación! También publicado . aquí

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.

Este audio es producido en el idioma original de la historia!

Utilizar fuentes personalizadas en informes JavaScript

Demasiado Largo; Para Leer

@grapecity

Credibility

HISTORIAS RELACIONADAS