V1
V1

字体设置(导出PDF 中文乱码)

在报表设计过程中,我们会为报表设计一些特殊字体或者本地安装的字体,这些字体也许可能不会被浏览器识别,预览,打印或导出。


通常情况下,浏览器加载特殊字体会遵循@font-face 规则,如果 HTML 元素不可见或者当前页面没有设置该元素,@ font-face规则就不会被处理。

为了保证浏览器能够识别正确的字体并且加载@font-rulers CSS 规则,首先需要准备字体描述,并且注册。以下是在Viewer 中使用字体的两种场景:

  1. 场景-1: 用户加载或注册字体,全部通过代码使用
  2. 场景-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>ActiveReportsJS Viewer</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 in IE-->
        <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 = new GC.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 文件中添加 Font Descriptors

ARJS 可用的字体都在 fontsConfig.json 文件中配置了, 如果要修改字体配置可以打开该文件去修改,文件路径: (fontsConfig.json) 文件。 • Windows 路径: ~\AppData\Roaming\ActiveReportsJS Designer. • macOS 路径: ~/Library/Application Support/ActivereportsJS Designer/. • Linux 路径: ~/.config/ActivereportsJS Designer/.

修改 fontsConfig.json 文件,添加以下内容,source 为字体路径:

{ "path": "", "descriptors": [ { "name": "Noto Sans CJK JP", "source": "NotoSansCJKjp-Regular.otf" },
{ "name": "Noto Serif CJK JP", "source": "NotoSerifCJKjp-Regular.otf" } ] }

从 Json File 注册字体:

ActiveReportsJS Viewer 注册字体代码如下

<body onload="load()">
    <div id="ARJSviewerDiv" style="height: 600px"></div>
    <script>
            function load() {
            const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
            viewer.registerFont("/fonts/fontsConfig.json"); //add fontsConfig.json in 'fonts' folder
            viewer.open('/reports/InvoiceList-Fonts.rdlx-json');    
         }
    </script>
</body>

注意

  • 只支持 .ttf,.otf,.woff 字体(IE11 不支持 woff2)

  • IE 和Edge浏览器不支持 Document.fonts API. 一些功能可以使用polyfills 实现 polyfills.

  • 需要从 registerFont() 方法加载, registerFont() 因此需要时间消耗。

  • 如果字体URL 不可用,字体是不会加载的,检查浏览器控制台信息

  • PDF 导出会忽略locals 属性,只从source加载文件

  • 通用的@font-face CSS 规则在导出HTML 时被拒绝的,Source 中的相关路径URL有问题时候,应该注册绝对路径

  • @font-face CSS 替换网页的全部字体,因此Viewer UI 中的所有字体都会受到影响。

  • 不支持.tte 文件。

  • 如果部署预览的话,需要在应用池注册字体的 MIME 类型,例如: 输入:.ttf MIME 类型:application/octet-stream