Utilizar fuentes personalizadas en informes JavaScript

Las fuentes juegan un papel importante en la representación visual de aplicaciones JavaScript 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.

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 Diseñador de informes independiente está creado con Electron , que utiliza Chromium para mostrar la interfaz de usuario.

• Los componentes JavaScript Report Viewer y Designer son partes de una aplicación web que se ejecuta en el navegador de la máquina de un usuario.

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

• Familia de fuentes : el ID de la fuente, es decir, Arial, Calabri o Times New Roman.
• Estilo de fuente : Normal o cursiva.
• Peso de fuente : Delgada, Extraligera, Normal, Mediana, Seminegrita, Negrita, Extranegrita, Pesada.

Una combinación única de estas tres propiedades se denomina Font Face . Una familia de fuentes normalmente consta de varias fuentes, que (normalmente) están representadas por varios archivos.

Por ejemplo, la familia de fuentes Calibri tiene seis tipos de fuentes diferentes:

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:

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

• macOS : ~/Biblioteca/Soporte de aplicaciones/ActiveReportsJS Designer/fontsConfig.json

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

  
  

En esta ubicación, cree una carpeta llamada Fuentes y copie todos los archivos de todas las fuentes que planea usar en esta carpeta.

Luego, abra el archivo fontsConfig.json 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 de ruta , especifique la ruta absoluta a la carpeta principal del directorio de fuentes . Reemplace los elementos predeterminados de la matriz de descriptores con los descriptores de las fuentes deseadas.

Cada descriptor incluye las siguientes propiedades:

Por ejemplo, para permitir las caras Regular, Cursiva y Negrita de la fuente Montserrat , utilizaría los siguientes descriptores:

 { "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 Familia de fuentes en una de las fuentes que enumeró en el archivo fontsConfig.json y que todas las fuentes se muestran correctamente.

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 Fuentes y el archivo fontsConfig.json a la carpeta de activos estáticos de su aplicación.

Esta carpeta varía según los diferentes marcos de aplicaciones para el usuario. Aquí están algunos ejemplos:

• Angular : utiliza la configuración de activos; Si la carpeta Fuentes y el archivo fontsConfig.json se copian en la carpeta de activos, modifique las propiedades de origen de los descriptores de fuentes en el archivo fontsConfig.json para que comiencen con los activos. Por ejemplo:

  { "nombre": "Montserrat", "peso": "900", "estilo": "italic", "fuente": "assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf" }

• React : utiliza la carpeta pública para aplicaciones creadas con create-react-app.

• Vue : utiliza el manejo de activos estáticos.

  
  

Finalmente, la aplicación debe llamar al método RegisterFonts del objeto FontStore con la URL del archivo fontsConfig . Este código debe ejecutarse antes de que la aplicación comience a mostrar o exportar informes. Tenga en cuenta que el método RegisterFonts es asíncrono y devuelve un objeto 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 Angular , React y Vue:

 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 fontSet de la instancia del diseñador en registrada.

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!