Page History

...

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

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

2、打开public文件，新建一个fonts文件，进行字体的配置

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

{
    "path": "",
    "descriptors": [
        {
            "name": "微软雅黑",
            "locals": [
                "微软雅黑",
                "MicrosoftYaHei"
            ],
            "source": "fonts/SimHei.ttf"
        },
        {
            "name": "微软雅黑 Light"
        },
        {
            "name": "等线"
        },
        {
            "name": "等线 Light"

        },
        {
            "name": "宋体",
            "source": "fonts/SimHei.ttf"

        },
        {
            "name": "仿宋"
        },
        {
            "name": "新宋体"
        },
        {
            "name": "幼圆"
        },
        {
            "name": "楷体"
        },
        {
            "name": "隶书"
        },
        {
            "name": "黑体",
            "source": "fonts/SimHei.ttf"
        },
        {
            "name": "Arial"
        },
        {
            "name": "Arial Black"
        },
        {
            "name": "Comic Sans MS"
        },
        {
            "name": "Courier New"
        },
        {
            "name": "Geneva"
        },
        {
            "name": "Georgia"
        },
        {
            "name": "Helvetica"
        },
        {
            "name": "Impact"
        },
        {
            "name": "Lucida Console"
        },
        {
            "name": "Meiryo"
        },
        {
            "name": "Meiryo UI"
        },
        {
            "name": "MingLiU"
        },
        {
            "name": "MingLiU-ExtB"
        },
        {
            "name": "MS Gothic"
        },
        {
            "name": "MS Mincho"
        },
        {
            "name": "MS PGothic"
        },
        {
            "name": "MS PMincho"
        },
        {
            "name": "MS Song"
        },
        {
            "name": "MS UI Gothic"
        },
        {
            "name": "NSimSun"
        },
        {
            "name": "Osaka"
        },
        {
            "name": "PMingLiU"
        },
        {
            "name": "PMingLiU-ExtB"
        },
        {
            "name": "SimSun"
        },
        {
            "name": "SimSun-ExtB"
        },
        {
            "name": "Song"
        },
        {
            "name": "Tahoma"
        },
        {
            "name": "Times New Roman"
        },
        {
            "name": "Trebuchet MS"
        },
        {
            "name": "Verdana"
        },
        {
            "name": "Yu Gothic"
        }
    ]
}

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

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

具体代码

...

Code Block

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文件

...

4、预览结果

Image Removed

5、导出PDF样式

Image Removed

6、Demo实例下载


  return (
    <div id="viewer-host">
      <Viewer report={{ Uri: 'MonthSurvey.rdlx-json' }} />
    </div>   
  );
}
export default App;

4、预览结果

Image Added

5、导出PDF样式

Image Added

6、Demo实例下载

View file

name	arjs-viewer.rar
height	250

Page tree

Versions Compared

Old Version 2

New Version 3

Key