前端如何将HTML 生成PDF并避免中文乱码的解决方法

前端生成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.