Utilizando fontes personalizadas em relatórios JavaScript

As fontes desempenham um papel importante na representação visual de aplicativos JavaScript e relatórios baseados na web. Por padrão, o JavaScript permite que os desenvolvedores personalizem itens como tamanho, espessura e estilo da fonte e até incluam tipos de fonte personalizados. A capacidade dos desenvolvedores de trabalhar e personalizar fontes permite aprimorar a estética e a legibilidade das informações que apresentam.

Para corresponder à flexibilidade do JavaScript, o ActiveReportsJS permite que os usuários personalizem fortemente o texto dos relatórios. Neste artigo, focaremos em como você pode aproveitar a capacidade do ActiveReportsJS Designer de personalizar fontes, abordando os seguintes tópicos:

• O básico das fontes

• Configurando o Aplicativo Designer Independente

• Configurando aplicativos baseados em ActiveReportsJS

• Configurando o componente Report Designer

  
  

O básico das fontes

Todos os componentes ActiveReportsJS operam em um ambiente de navegador da web:

• O Standalone Report Designer é construído com Electron , que usa Chromium para exibir a interface do usuário.

• Os componentes JavaScript Report Viewer e Designer são partes de um aplicativo da web executado no navegador da máquina de um usuário.

• Os filtros de exportação de PDF, dados tabulares e HTML usam um ambiente de navegador da web para medir o conteúdo do relatório.

  
  

Um relatório típico consiste em conteúdo textual que o navegador renderiza usando formas chamadas glifos. Os recursos de fontes contêm informações que mapeiam códigos de caracteres para glifos que representam esses caracteres. Portanto, os navegadores precisam de acesso aos recursos de fontes para exibir o texto conforme o esperado.

Todo o conteúdo textual em ActiveReportsJS possui várias propriedades de fonte, incluindo:

• Família de fontes : O ID da fonte, ou seja, Arial, Calabri ou Times New Roman.
• Estilo da fonte : Normal ou itálico.
• Peso da fonte : Fino, Extra Leve, Normal, Médio, SemiBold, Negrito, Extra Negrito, Pesado.

Uma combinação única dessas três propriedades é chamada Font Face . Uma família de fontes normalmente consiste em várias faces de fontes, que são (normalmente) representadas por vários arquivos.

Por exemplo, a família de fontes Calibri tem seis fontes diferentes:

Quando ActiveReportsJS renderiza um relatório, ele converte essas propriedades de fonte em propriedades de estilo CSS font-family, font-style e font-weight. Ele depende de um navegador para resolver recursos de fontes associados e extrair os glifos necessários. O navegador possui duas maneiras de acessar recursos de fontes; localmente, no sistema em que um navegador é executado ou por download.

Os recursos de fontes para download são fáceis de manter; todos os navegadores modernos os suportam e garantem a saída consistente de conteúdo textual em todos os ambientes. Além disso, o ActiveReportsJS PDF Export requer fontes para download porque incorpora seus subconjuntos em um documento PDF. Portanto, a melhor maneira de garantir uma saída de relatório consistente em todos os ambientes é configurar componentes ActiveReportsJS para acessar recursos de fontes para download.

Antes de começarmos, precisamos decidir quais famílias de fontes queremos usar em nossos relatórios. Podem ser fontes padrão como Arial, Times New Roman ou Helvetica. Ou pode ser qualquer número de fontes da web. Para nosso exemplo, usaremos a fonte Montserrat; esta é a mesma fonte que usamos em nossos relatórios de demonstração.

Em qualquer caso, certifique-se de ter todos os arquivos de fontes de todas as famílias de fontes que planeja usar. ActiveReportsJS oferece suporte aos seguintes formatos de fonte:

Configurando o Designer de Relatório Independente

Para adicionar uma família de fontes ao designer independente, primeiro você precisa navegar até a pasta que contém o arquivo de configuração da fonte ActiveReportsJS. Eles estão nos seguintes locais, com base no seu sistema operacional:

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

• macOS : ~/Library/Application Support/ActiveReportsJS Designer/fontsConfig.json

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

  
  

Neste local, crie uma pasta chamada Fontes e copie todos os arquivos de todas as fontes que você planeja usar para esta pasta.

Em seguida, abra o arquivo fontsConfig.json no editor de texto de sua preferência. Este arquivo contém descritores para raças de fontes que um autor de relatório usará para conteúdo textual. Na propriedade path , especifique o caminho absoluto para a pasta pai do diretório Fonts . Substitua os itens padrão da matriz de descritores pelos descritores das fontes desejadas.

Cada descritor inclui as seguintes propriedades:

Por exemplo, para permitir as faces Regular, Itálico e Negrito da fonte Montserrat , você usaria os seguintes descritores:

 { "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" }

Execute o aplicativo de designer independente, adicione um TextBox no corpo de um relatório e certifique-se de poder definir sua propriedade Font Family como uma das fontes enumeradas no arquivo fontsConfig.json e de que todas as faces da fonte sejam exibidas corretamente.

Configurando aplicativos baseados em ActiveReportsJS

Um aplicativo que exibe relatórios no visualizador de relatórios JavaScript, exporta relatórios para um PDF ou hospeda o componente designer de relatórios deve usar a mesma configuração criada para o aplicativo designer independente. A maneira mais fácil de conseguir isso é copiar a pasta Fonts e o arquivo fontsConfig.json para a pasta de ativos estáticos do seu aplicativo.

Esta pasta varia para diferentes estruturas de front-end. Aqui estão alguns exemplos:

• Angular : usa configuração de ativos; se a pasta Fonts e o arquivo fontsConfig.json forem copiados para a pasta assets, modifique as propriedades de origem dos descritores de fonte no arquivo fontsConfig.json para que eles comecem com assets. Por exemplo:

  { "nome": "Montserrat", "peso": "900", "estilo": "itálico", "fonte": "ativos/Fontes/Montserrat/Montserrat-BlackItalic.ttf" }

• React : usa a pasta pública para aplicativos criados com create-react-app.

• Vue : usa manipulação de ativos estáticos.

  
  

Por fim, a aplicação deve chamar o método registerFonts do objeto FontStore com a URL do arquivo fontsConfig . Esse código deve ser executado antes que o aplicativo comece a exibir ou exportar relatórios. Observe que o método registerFonts é assíncrono e retorna um objeto Promise .

O código que chama esse método também pode esperar até que a promessa retornada seja resolvida antes de carregar os relatórios no componente visualizador ou exportá-los.

Para aplicações JavaScript puras, o código ficará assim:

 <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 aplicativos Angular , React e Vue:

 import { Core } from "@grapecity/activereports"; Core.FontStore.registerFonts("/assets/fontConfig.json") // replace the URL with the actual one

Você pode encontrar exemplos desse código em nossas demonstrações ao vivo .

Configurando o componente Report Designer

Finalmente, para garantir que o componente do designer de relatório exiba apenas as fontes registradas, defina a propriedade fontSet da instância do designer como registrada.

Além disso, se quiser garantir que os itens de relatório recém-adicionados tenham uma das fontes registradas por padrão, você pode usar o recurso Modelo de inicialização personalizado .

Conclusão

E com isso chegamos ao final do artigo. Como já discutimos, as fontes são uma forma poderosa para os desenvolvedores melhorarem a estética e a legibilidade. Neste artigo, mostramos como é fácil incorporar fontes personalizadas em seus relatórios por meio do Designer e Visualizador de Relatórios ActiveReportsJS.

Boa codificação!