纯JS集成报表系列教程3

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

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

**1、首先新建一个项目，项目名称叫做 "Viewer"

2、新建一个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、打开项目中的index.html，引入该方法：
**

viewer.registerFont("fonts/fontsConfig.json");

具体代码
`
<!DOCTYPE html>

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>ActiveReportsJS sample</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<script src="/dist/ie-polyfills.js"></script>

<script src="/dist/ar-js-core.js"></script>

<script src="/dist/ar-js-designer.js"></script>

<script src="/dist/ar-js-viewer.js"></script>

<script src="/dist/ar-js-pdf.js"></script>

<script src="/dist/designer/zh-locale.js"></script>

<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap"

      rel="stylesheet" />

<link rel="stylesheet"

      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"

      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"

      crossorigin="anonymous" />

<link rel="stylesheet"

      type="text/css"

      href="/styles/ar-js-ui.css" />

<link rel="stylesheet"

      type="text/css"

      href="/styles/ar-js-viewer.css" />

<link rel="stylesheet"

      type="text/css"

      href="/styles/ar-js-designer.css" />

<style>

    #viewer-host {

        margin: 0 auto;

        width: 100%;

        height: 100vh;

    }

</style>

</head>

<body>

<div id="viewer-host"></div>

<script>   

  const viewer = new ActiveReports.Viewer("#viewer-host", { language: "zh" });

  viewer.registerFont("fonts/fontsConfig.json"); //引入字体配置；

  viewer.open('reports/MonthSurvey.rdlx-json');

</script>

</body>

</html>
`

4、预览结果

5、导出PDF样式

纯JS集成报表系列教程3

LanLan_Guo

引用和评论

纯JS集成报表系列教程7-样式自定义

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高