关于javascript:纯JS集成报表系列教程3

39次阅读

共计 2568 个字符，预计需要花费 7 分钟才能阅读完成。

导出 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 款式

正文完