在 JavaScript 报告中使用自定义字体

字体在JavaScript应用程序和基于 Web 的报告的视觉表示中发挥着重要作用。默认情况下，JavaScript 允许开发人员自定义字体大小、粗细和样式等内容，甚至包括自定义字体类型。开发人员使用和自定义字体的能力使他们能够增强所呈现信息的美观性和可读性。

为了匹配 JavaScript 的灵活性，ActiveReportsJS 允许用户大量自定义报表中的文本。在本文中，我们将重点介绍如何利用 ActiveReportsJS Designer 自定义字体的功能，涵盖以下主题：

• 字体基础知识

• 配置独立设计器应用程序

• 配置基于 ActiveReportsJS 的应用程序

• 配置报表设计器组件

  
  

字体基础知识

所有 ActiveReportsJS 组件都在 Web 浏览器环境中运行：

• 独立报表设计器是用Electron构建的，它使用 Chromium 来显示用户界面。

• JavaScript 报表查看器和设计器组件是在用户计算机上的浏览器中运行的 Web 应用程序的一部分。

• PDF、表格数据和 HTML 导出过滤器使用 Web 浏览器环境来衡量报告内容。

  
  

典型的报告由浏览器使用称为字形的形状呈现的文本内容组成。字体资源包含将字符代码映射到表示这些字符的字形的信息。因此，浏览器需要访问字体资源才能按预期显示文本。

ActiveReportsJS 中的所有文本内容都有多个字体属性，包括：

• 字体系列：字体 ID，即 Arial、Calabri 或 Times New Roman。
• 字体样式：正常或斜体。
• 字体粗细：细、超细、正常、中、半粗体、粗体、超粗体、粗体。

这三个属性的独特组合称为Font Face 。字体系列通常由多个字体组成，这些字体（通常）由多个文件表示。

例如， Calibri字体系列有六种不同的字体：

当 ActiveReportsJS 呈现报表时，它将这些字体属性转换为 font-family、font-style 和 font-weight CSS 样式属性。它依靠浏览器来解析关联的字体资源并提取所需的字形。浏览器有两种方式访问字体资源；本地、在浏览器运行的系统上或通过下载。

可下载字体资源，易于维护；所有现代浏览器都支持它们，并且它保证了在所有环境中文本内容的一致输出。此外，ActiveReportsJS PDF Export 需要可下载字体，因为它将字体子集嵌入 PDF 文档中。因此，确保所有环境中报表输出一致的最佳方法是配置 ActiveReportsJS 组件来访问可下载的字体资源。

在开始之前，我们需要决定要在报告中使用哪些字体系列。它可以是标准字体，如 Arial、Times New Roman 或 Helvetica。或者，它可以是任意数量的网络字体。对于我们的示例，我们将使用 Montserrat 字体；这与我们用于演示报告的字体相同。

无论如何，请确保您拥有计划使用的所有字体系列的所有字体文件。 ActiveReportsJS 支持以下字体格式：

配置独立报表设计器

要将字体系列添加到独立设计器，您首先需要导航到包含 ActiveReportsJS 字体配置文件的文件夹。根据您的操作系统，它们位于以下位置：

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

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

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

  
  

在此位置，创建一个名为Fonts的文件夹，并将您计划使用的所有字体的所有文件复制到此文件夹中。

然后，在您选择的文本编辑器中打开fontsConfig.json文件。此文件包含报表作者将用于文本内容的字体竞赛描述符。在路径属性中，指定Fonts目录的父文件夹的绝对路径。将描述符数组的默认项替换为所需字体的描述符。

每个描述符都包含以下属性：

例如，要允许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" }

运行独立设计器应用程序，在报表正文中添加一个 TextBox，并确保可以将其Font Family属性设置为fontsConfig.json文件中枚举的字体之一，并且所有字体均正确显示。

配置基于 ActiveReportsJS 的应用程序

在 JavaScript 报表查看器中显示报表、将报表导出为 PDF 或托管报表设计器组件的应用程序应使用为独立设计器应用程序创建的相同配置。实现此目的的最简单方法是将Fonts文件夹和fontsConfig.json文件复制到应用程序的静态资产文件夹。

对于不同的前端框架，该文件夹有所不同。这里有一些例子：

• Angular ：使用资产配置；如果将Fonts文件夹和fontsConfig.json文件复制到assets文件夹中，请修改fontsConfig.json文件中字体描述符的源属性，以便它们以assets开头。例如：

  {“名称”：“Montserrat”，“权重”：“900”，“风格”：“斜体”，“来源”：“assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf”}

• React ：使用公共文件夹来存放使用 create-react-app 创建的应用程序。

• Vue ：使用静态资产处理。

  
  

最后，应用程序应使用fontsConfig文件的 URL 调用 FontStore 对象的registerFonts方法。此代码应在应用程序开始显示或导出报告之前运行。请注意， registerFonts方法是异步的，并返回Promise对象。

调用此方法的代码也可以等到返回的 Promise 解析后再将报告加载到查看器组件或导出它们。

对于纯 JavaScript 应用程序，代码将如下所示：

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

对于Angular 、 React和 Vue 应用程序：

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

您可以在我们的现场演示中找到此代码的示例。

配置报表设计器组件

最后，为了确保报表设计器组件仅显示已注册的字体，请将设计器实例的fontSet属性设置为已注册。

此外，如果您想确保新添加的报表项默认具有其中一种注册字体，您可以使用自定义初始化模板功能。

结论

至此，我们就到了本文的结尾。正如我们所讨论的，字体是开发人员增强美观性和可读性的有效方法。在本文中，我们展示了通过 ActiveReportsJS 报表设计器和查看器将自定义字体合并到报表中是多么容易。

快乐编码！