ActiveReportsJS 字体配置解决吃字字体覆盖等问题

通常情况下，报表由文本内容组成，浏览器通过使用glyphs来渲染的字体形状。字体资源包含将字符编码映射到代表这些字符的字形的信息。因此，浏览器需要访问字体资源，才能够按照预期显示文本。
当 ActiveReportsJS 渲染报表时，它将这些字体属性翻译成font-family, font-style、font-style 和 font-weight 和font-weightCSS样式属性，并依靠浏览器来解析相关的字体资源，提取所需的字形。浏览器有两种方式来访问字体资源它们可能安装在浏览器运行的系统中，也可能是可下载的。

但经常在浏览器为英文或者其他设置的情况下会出现富文本框右侧吃字，超链接显示不全等问题。
究其原因还是字体未正确的读取，导致ActiveReportsJS 测量字的时候测量错误，计算空间失误导致无法正确显示字体。

示例附件

解决方法：
1. 添加 fontsConfig.json文件及对应应用的字体文件，注意 fontConfig.json 中顶部的 name字段必须存在，否则报错。

1. {
   
2.         "name": "",
   
3.         "path": "",
   
4.         "descriptors": [
   
5.         
   
6.                 {
   
7.                         "name": "ABC",
   
8.                         "source": "fonts/Chinese.ttf"
   
9.                 },
   
10.                         
    
11.                 {
    
12.                         "name": "CBC",
    
13.                         "source": "fonts/Chinese.ttf"
    
14.                 },
    
15.                 {
    
16.                         "name": "黑体",
    
17.                         "source": "fonts/Chinese.ttf"
    
18.                 }
    
19.         ]
    
20. }

复制代码

2. 调用GC.ActiveReports.Core.ARJS.FontStore.registerFonts() ，该API 也会返回Promise对象

1. ARJS.FontStore.registerFonts("./fonts/fontsConfig.json")
   
2.       .then(function(){
   
3.         return fetch("./fonts/fontsConfig.json");
   
4.       })
   
5.       .then(function (e) {
   
6.         return e.json();
   
7.       })
   
8.       .then(function (fonts) {
   
9. 
   
10.         const settings = {
    
11.           info: {
    
12.             title: 'Invoice List',
    
13.             subject: 'This is the Invoice List',
    
14.             author: 'John K',
    
15.             keywords: 'PDF; import; export',
    
16.           },
    
17.           fonts: fonts,
    
18.         };
    
19.         const lang = 'HK';
    
20.         function blob2base64(blob) {
    
21.           return new Promise((resolve, reject) => {
    
22.             var reader = new FileReader();
    
23.             reader.onloadend = () => {
    
24.               resolve(reader.result);
    
25.             };
    
26.             reader.onerror = () => {
    
27.               reject(reader.err);
    
28.             };
    
29.             reader.readAsDataURL(blob);
    
30.           });
    
31.         }
    

复制代码

3. 设置定时器，等字体加载完成后在进行渲染

1.   function exportDocumentOnViewerReady() {
   
2.     var exportInterval = setInterval(function () {
   
3.       if (!window.arjsViewerInitialized) {
   
4.         return;
   
5.       }
   
6. 
   
7.       window.generateProposal('超链接吃字.rdlx-json');
   
8. 
   
9.       clearInterval(exportInterval);
   
10. 
    
11.     }, 300);
    
12.   }

复制代码