View Source

ActiveReportsJS默认可以导出PDF、Excel、Html。但是在导出PDF的时候需要进行字体文件的配置，如果没有进行字体配置，那么导出PDF就会出现乱码

下面就来进行字体配置的具体讲解

1、首先新建一个项目，项目名称叫做 "arjs-viewer"

2、打开public文件，新建一个fonts文件，

进行字体的配置，字体文件可以在本机获取或者直接在网上下载：本机文件位置(C:\Windows\Fonts)

网上下载直接这样进行搜索如：宋体字体格式ttf下载

字体文件配置的字体格式的后缀必须是.ttf的格式

配置文件(这里我默认设置的字体是微软雅黑、楷体，宋体)

{
    "path": "",
    "descriptors": [
        {
            "name": "微软雅黑",
            "locals": [
                "微软雅黑",
                "MicrosoftYaHei"
            ],
            "source": "fonts/SimHei.ttf"
        },
        {
            "name": "楷体",
            "locals": [
                "楷体",
                "楷体"
            ],
            "source": "fonts/simkai.ttf"
        },
        {
            "name": "宋体",
            "locals": [
                "宋体",
                "宋体"
            ],
            "source": "fonts/simsun.ttf"
        }
    ]
}

3、打开项目中的 app.js文件，导入该方法：

import { FontStore } from "@grapecity/activereports/core";

具体代码

import React from "react";
import "./App.css";
import { Viewer } from "@grapecity/activereports-react";
import { FontStore } from "@grapecity/activereports/core";
import "@grapecity/activereports";


function App() {
  FontStore.registerFonts("/fonts/fontsConfig.json");//引入字体配置json文件
  return (
    <div id="viewer-host">
      <Viewer report={{ Uri: 'MonthSurvey.rdlx-json' }} />
    </div>   
  );
}
export default App;

4、预览结果

5、导出PDF样式

6、Demo实例下载