91福利社,日韩专区中文字幕,国产后入又长又硬

輕量級Web報表工具ActiveReportsJS教程：ARJS 導出PDF 中文亂碼及使用特殊字體設置方法

轉帖|使用教程|編輯：莫成敏|2020-05-15 10:00:14.843|閱讀 571 次

概述：本文介紹了關于 ARJS 導出PDF 中文亂碼及使用特殊字體設置方法。

ActiveReportsJS 是一款基于 HTML5 的純前端在線報表控件，通過拖拽式報表設計器，可以快速地設計 Excel表格、Word文檔、圖表、數據過濾、數據鉆取、精準套打等類型報表，全面滿足 JavaScript、Html5、Augular、Vue、React、PureJS 等平臺中報表的開發需要。同時，通過豐富的API可以靈活的實現報表創建、加載和運行時的個性化自定義需求。

本文介紹了關于 ARJS 導出PDF 中文亂碼及使用特殊字體設置方法。

點擊下載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: ~\AppData\Roaming\ActiveReportsJS 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>

注意