关于前端:前端解决前端英文Chrome-浏览器出现的生成PDF吃字及超链接显示问题

通常状况下,报表由文本内容组成,浏览器通过应用glyphs来渲染的字体形态。字体资源蕴含将字符编码映射到代表这些字符的字形的信息。因而,浏览器须要拜访字体资源,才可能依照预期显示文本。
当 ActiveReportsJS 渲染报表时,它将这些字体属性翻译成font-family, font-style、font-style 和 font-weight 和font-weightCSS款式属性,并依附浏览器来解析相干的字体资源,提取所需的字形。浏览器有两种形式来拜访字体资源它们可能装置在浏览器运行的零碎中,也可能是可下载的。

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

解决办法:

  1. 增加 fontsConfig.json文件及对应利用的字体文件,留神 fontConfig.json 中顶部的 name字段必须存在,否则报错。
{
        "name": "",
        "path": "",
        "descriptors": [
        
                {
                        "name": "ABC",
                        "source": "fonts/Chinese.ttf"
                },
                        
                {
                        "name": "CBC",
                        "source": "fonts/Chinese.ttf"
                },
                {
                        "name": "黑体",
                        "source": "fonts/Chinese.ttf"
                }
        ]
}
  1. 调用GC.ActiveReports.Core.ARJS.FontStore.registerFonts() ,该API 也会返回Promise对象
 ARJS.FontStore.registerFonts("./fonts/fontsConfig.json")
      .then(function(){
        return fetch("./fonts/fontsConfig.json");
      })
      .then(function (e) { 
        return e.json();
      })
      .then(function (fonts) {

        const settings = {
          info: {
            title: 'Invoice List',
            subject: 'This is the Invoice List',
            author: 'John K',
            keywords: 'PDF; import; export',
          },
          fonts: fonts,
        };
        const lang = 'HK';
        function blob2base64(blob) {
          return new Promise((resolve, reject) => {
            var reader = new FileReader();
            reader.onloadend = () => {
              resolve(reader.result);
            };
            reader.onerror = () => {
              reject(reader.err);
            };
            reader.readAsDataURL(blob);
          });
        }
  1. 设置定时器,等字体加载实现后在进行渲染
  function exportDocumentOnViewerReady() {
    var exportInterval = setInterval(function () {
      if (!window.arjsViewerInitialized) {
        return;
      }

      window.generateProposal('超链接吃字.rdlx-json');

      clearInterval(exportInterval);

    }, 300);
  }

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理