共计 2872 个字符，预计需要花费 8 分钟才能阅读完成。
前端生成 PDF 如果是非 UTF-8 字符再生成 PDF 的过程中容易乱码，且布局容易错乱，是因为前端很多出现后果都是基于字体来绘制的，而前端又无奈通过浏览器拜访客户机的本地资源，因为权限的管制，所以容易导致字体缺失从而导致乱码，因而任何一个前端工具在生成 PDF 时候，如果是非英文字体，须要进行字体配置后，通知生成引擎，当渲染该类元素时能够去找这类字体，从而防止错别字。
字体配置
所有 ActiveReportsJS 组件都基于 Web 浏览器环境来运行。
桌面报表设计器 是基于 Electron 应用 Chromium 来显示用户界面。
Web 在线设计器 和 报表 viewer 组件在用户计算机的浏览器中运行的 Web 应用程序。
PDF, Excel 和 HTML 导出生成器 基于浏览器环境来测量并生成报表内容。
通常状况下，报表由文本内容组成，浏览器通过应用 glyphs 来渲染的字体形态。字体资源蕴含将字符编码映射到代表这些字符的字形的信息。因而，浏览器须要拜访字体资源，才可能依照预期显示文本。
ActiveReportsJS 中的所有文本项都具备几种字体属性，包含
字体: 字体 ID 如 Arial，Calibri，或 Times New Roman
字体款式: 失常 或 斜体
字体粗细: 较细，细体，失常，适中，粗体，较粗
这三个属性的独特组合称为“字体”。字体系列通常由多个字体组成，通常由独自的文件示意。例如，以下是 Windows 零碎中 Arial 字体系列文件夹的屏幕截图：
当 ActiveReportsJS 渲染报表时，它将这些字体属性翻译成 font-family, font-style、font-style 和 font-weight 和 font-weightCSS 款式属性，并依附浏览器来解析相干的字体资源，提取所需的字形。浏览器有两种形式来拜访字体资源它们可能装置在浏览器运行的零碎中，也可能是可下载的。
应用可下载的字体资源易于保护；所有浏览器都反对它，并且它保障了在所有环境中文本内容的统一输入。此外，ActiveReportsJS PDF 导出须要注册字体，因为它将其子集嵌入到 PDF 文档中。因而，确保所有环境中报表输入统一的最佳办法是配置 ActiveReportsJS 组件以拜访可下载的字体资源。本文提供了实现该指标的分步指南。
首先，决定在报表中应用哪些字体系列。它能够是规范字体，如 Arial、Times New Roman 或 Helvetica。也能够是一种或多种网络字体。咱们在演示网站示例报表中应用 Montserrat 字体。在任何状况下，请确保你领有字体的所有文件。ActiveReportsJS 反对以下字体格局。
字体格局 文件扩展名 留神
WOFF 1.0 (Web 凋谢字体格局) *.woff
WOFF 2.0 (Web 凋谢字体格局) *.woff2 IE11 不反对
TrueType *.ttf
OpenType .ttf, .otf
配置桌面设计器字体
您能够在以下地位找到独立的报表设计器字体配置。
Windows : C:\Users\ 您的计算机名 \AppData\Roaming\ActiveReportsJS Designer
MacOS: ~/Library/Application Support/ActiveReportsJS Designer/fontsConfig.json
Linux: ~/.config/ActivereportsJS Designer/fontsConfig.json
创立 Fonts 文件夹，并将所有须要的字体资源文件拷贝到该文件夹上面。
而后关上 fontsConfig.json 文件，该文件蕴含报表文本内容的波及的字体描述符。在 path 属性中, 指定到 Fonts 目录的父文件夹的绝对路径。替换 descriptors 默认项。每个描述符都蕴含以下属性：
属性名称 形容 留神
name 字体名称 “Arial” 或 “Times New Roman”
style 字体款式 “normal” 或 “italic”
weight 字体粗细 倡议应用 100 到 900 之间的数值。参考 CSS 阐明
source 字体文件的相对路径 例如, “Fonts/Calibri/calibri.ttf”
例如, 应用 Montserrat 字体, 能够增加以下信息
fontsConfig.json 中 ”descriptors” 字段示例
运行桌面设计器应用程序，在报表中增加一个文本框，并确保能将字体属性设置为在 fontsConfig.json 文件中列举的字体之一，并且所有的字体都能正确显示。
配置基于 ActiveReportsJS 的应用程序
在报表 Viewer 中显示报表，将报表导出为 PDF 或托管报表设计器组件的应用程序应应用与为独立设计器应用程序创立的配置雷同的配置。最简略的形式是复制 Fonts 文件夹和 fontsConfig.json 文件到我的项目的 assets 文件夹上面. 此文件夹因不同的前端框架而异。v 示例如下:
应用 React 利用的 Public 文件夹，创立 react 利用参考
应用 Angular 利用的 Assets 配置文件，如果 Fonts 文件夹和 fontsConfig.json 文件复制到 assets 文件夹下，能够批改 fontsConfig.json 的 font descriptors 的 source 属性，示例如下：
{
"name": "Montserrat",
"weight": "900",
"style": "italic",
"source": "assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf"}
Vue 框架是搁置在 动态 Assets 文件解决 最初，该应用程序，应该调用 FontStore 的 registerFonts 办法，来加载 fontsConfig 文件。该代码须要在应用程序开始展现或导出报表之前执行。留神 registerFonts 办法是个异步函数，并会返回 Promise 对象。也能够，调用此办法的代码能够期待，直到返回 Promise 后果后，再在查看器组件中加载报表或导出报表。
纯 JavaScript 代码示例：
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/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配置 Web 报表设计器
为确保报表设计器组件仅显示注册的字体，设置 设计器实例的 fontSet 属性 为 registered.