ActiveReportsJS 是一款基于 HTML5 的纯前端在线 表控件，通过拖拽式 表设计器，可以快速地设计 Excel表格、Word文档、图表、数据过滤、数据钻取、精准套打等类型 表，全面满足 JavaScript、Html5、Augular、Vue、React、PureJS 等平台中 表的开发需要。同时，通过丰富的API可以灵活的实现 表创建、加载和运行时的个性化自定义需求。
ActiveReportsJS正式版
字体设置
在 表设计过程中，我们会为 表设计一些特殊字体或者本地安装的字体，这些字体也许可能不会被浏览器识别，预览，打印或导出。
通常情况下，浏览器加载特殊字体会遵循@font-face 规则，如果 HTML 元素不可见或者当前页面没有设置该元素，@ font-face规则就不会被处理。
为了保证浏览器能够识别正确的字体并且加载@font-rulers CSS 规则，首先需要准备字体描述，并且注册。以下是在Viewer 中使用字体的两种场景：
1.用户加载或注册字体，全部通过代码使用。
2.直接在Viewer 中注册字体，字体在设计 表时，已经添加到（fontConfig.json）文件中。
场景1 ：准备字体描述器（Font Descriptors）
font descriptor 接口由以下内容组成：
- locals: 接受浏览器调用的字体的安装副本的字体名称，用于浏览器在系统目录中查找（C： Windows Fonts，/ usr / share / fonts等）中搜索时使用的已安装字体副本的字体名称。它不接受路径。
- source: 可直接下载字体的URL，如果字体没有在安装目录下找到，会去在URL 下面接受，如绝对路径 (“http://…”) 相关路径 (“/…”), 但不是本地路径
const fonts: FontDescriptor[]= [ { name: 'Noto Sans CJK JP', // font-family: "Noto Sans" locals: ['Noto Sans'], // try to find this font on local machine before load from remote source: 'fonts/NotoSansCJKjp-Regular.otf' // remote URL }, { name: 'Noto Serif CJK JP', // font-family: "Noto Serif" locals: ['Noto Serif', 'Arial'], // try to find "Noto Serif" on local machine or use"Arial" instead before loading from remote source: 'fonts/NotoSerifCJKjp-Regular.otf' // remote URL } ];
注册字体：
在Viewer 中添加字体描述器，使用 viewer.registerFont():
const viewer = new ActiveReports.Viewer('#root'); viewer.registerFont(...fonts).then(()=> viewer.open('/reports/InvoiceList.rdlx-json'));
或者使用 PageReport的GC.ActiveReports.Core.registerFont():接口：
const report = new GC.ActiveReports.Core.PageReport(); GC.ActiveReports.Core.registerFont(...fonts) .then(() => report.load('/reports/InvoiceList.rdlx-json')) .then(() => report.run()) .then(document => document.print());
完整的代码如下：
<head> <title>ActiveReportsJSViewer</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/ar-js-viewer.css" /> <script type="text/javascript" src="scripts/ie-polyfills.js"></script> <!--to run inIE--> <script type="text/javascript" src="scripts/ar-js-core.js"></script> <script type="text/javascript" src="scripts/ar-js-viewer.js"></script> </head> <body onload="load()"> <script> var Noto_Sans = { name: 'Noto Sans CJK JP', locals: ['Noto Sans'], source: 'fonts/NotoSansCJKjp-Regular.otf' }; var Noto_Serif = { name: 'Noto Serif CJK JP', locals: ['Noto Serif', 'Arial'], source: 'fonts/NotoSerifCJKjp-Regular.otf' }; var fonts = [Noto_Sans,Noto_Serif]; function load() { const report = newGC.ActiveReports.Core.PageReport(); GC.ActiveReports.Core.registerFont(...fonts) .then(() => report.load('/reports/InvoiceList.rdlx-json')) .then(() => report.run()) .then(document => document.print()); } </script> </body>
如果要注册 .ttc 文件，需要添加”postscriptName”属性：
viewer.registerFont({ src: 'fonts/msgothic.ttc', name: 'MS Gothic', postscriptName: 'MS-Gothic' });
场景2：在JSON 文件中添加 FontDescriptors
1.ARJS 可用的字体都在 fontsConfig.json 文件中配置了， 如果要修改字体配置可以打开该文件去修改，文件路径：
- For Windows: ~AppDataRoamingActiveReportsJS Designer.
- For macOS: ~/Library/Application Support/ActivereportsJS Designer/.
- For Linux: ~/.config/ActivereportsJS Designer/.
2. 修改fontsConfig.json 文件，添加以下内容
{ "path": "", "descriptors": [ { "name": "Noto Sans CJK JP", "source": "NotoSansCJKjp-Regular.otf" }, { "name": "Noto Serif CJK JP", "source": "NotoSerifCJKjp-Regular.otf" } ] }
这样的话就可以在设计器中使用添加的字体。
从Json File 注册字体：
<body onload="load()"> <div id="ARJSviewerDiv" style="height:600px"></div> <script> function load() { const viewer = newActiveReports.Viewer('#ARJSviewerDiv'); viewer.registerFont("/fonts/fontsConfig.json"); //addfontsConfig.json in 'fonts' folder viewer.open('/reports/InvoiceList-Fonts.rdlx-json'); } </script></body>
注意
- 只支持 .ttf，.otf,.woff 字体（IE11 不支持 woff2）
- IE 和Edge浏览器不支持 Document.fontsAPI。 一些功能可以使用polyfills 实现
- 需要从registerFont() 方法加载，因此需要时间消耗。
- 如果字体URL 不可用，字体是不会加载的，检查浏览器控制台信息
- PDF 导出会忽略locals 属性，只从源加载文件
- 通用的@font-face CSS 规则在导出HTML 时被拒绝的，Source 中的相关路径URL有问题时候，应该注册绝对路径
- @font-face CSS 替换 页的全部字体，因此Viewer UI 中的所有字体都会受到影响。
- ,tte 文件不支持。 如果需要可以使用在线转换工具将字体转换为ttf的格式：https://transfonter.org/ttc-unpack
- 如果部署预览的话，需要注册字体的MIME 类型，如图
输入：.ttf MIME 类型：application/octet-stream
希望文章对您有所帮助~感兴趣的朋友可以ActiveReportsJS试用版~
想要购买ActiveReportsJS正版授权，或了解更多产品信息请点击【咨询在线客服】
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！