KearneyKang 发表于 2024-7-5 14:29:51

Web设计器如何设置默认字体

在设计器使用的时候，有时候有这种需求，就是想报表进行新建的时候。能够直接默认好字体。比如默认字体是 微软雅黑或者是宋体
那么这应该如何实现了
1、首先设置可选择的字体类型，设置 fontsConfig.json 字体配置文件
设置可选择的字体为微软雅黑和宋体
{
      "path": "",
      "descriptors": [
                {
                        "name": "微软雅黑",
                        "locals": [
                              "微软雅黑",
                              "MicrosoftYaHei"
                        ],
                        "source": "fonts/SimHei.ttf"
                },               
                {
                        "name": "宋体",
                        "source": "fonts/simsun.ttc"
                }               
      ]
}2、代码层设置设计器的选择字体配置 designer.fontSet = "registered"
ARJS.FontStore.registerFonts("./fonts/fontsConfig.json").then(res => {
    console.log(designer)
    designer.fontSet = "registered"
})3、设置默认模块，如果你的报表想默认都是微软雅黑，那么模版文件中所有组件的字体都默认设置为微软雅黑。模版设置代码
var defaultTemplates = {
    metricTemplates: [{ id: "reports/metric-template.rdlx-json" }],
    imperialTemplates: [{ id: "reports/imperial-template.rdlx-json" }],
};4、整个实现代码
<html lang="en">

<head>
<title>ActiveReportsJS Designer</title>
<meta charset="utf-8">
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.2.0/styles/ar-js-ui.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.2.0/styles/ar-js-designer.css"
    type="text/css" />
<script src="https://cdn.grapecity.com/activereportsjs/4.2.0/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.2.0/dist/ar-js-designer.js"></script>
<script src="./zh-locale.js"></script>
<style>
    #designer-host {
      margin: 0 auto;
      width: 100%;
    }

    button {
      display: none;
    }
</style>

</head>

<body>

<div id="designer-host"></div>
</body>

<script>

const ARJS = GC.ActiveReports.Core;


var defaultTemplates = {
    metricTemplates: [{ id: "reports/metric-template.rdlx-json" }],
    imperialTemplates: [{ id: "reports/imperial-template.rdlx-json" }],
};
var designerConfig = {
    language: "zh",
    customInitTemplates: defaultTemplates,
    disableOpenSaveHotkeys: false,
    lockLayout: false,
    storeUserPreferences: false,
    disableSystemClipboard: false,
};
let designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host",designerConfig);
ARJS.FontStore.registerFonts("./fonts/fontsConfig.json").then(res => {
    console.log(designer)
    designer.fontSet = "registered"
})
designer.setActionHandlers({
    onRender: function (info) {
      console.log(info)
    }
})

</script>

</html>具体详细代码的demo见附件

x154 发表于 2024-9-4 14:38:29

设置了没用 默认的还是Arial

Felix.Li 发表于 2024-9-4 15:13:09

本帖最后由 Felix.Li 于 2024-9-4 15:14 编辑

您好，这个需要您定义两个模板，模板里面把单元格的字体设置为我们需要的字体即可：




这两个报表添加一个文本框，文本框设置默认属性：

用来控制初始化的属性设置


这两个报表配置要求在设计器加载的时候可以被正常请求到

x154 发表于 2024-9-4 16:34:02

意思就是写空的模板 但是设置好字体的？

Felix.Li 发表于 2024-9-5 17:59:29

是的，相当于设置的这两个模板，就是其他所有报表创建，以这个属性为模板创建，所以我们就得在模板里面，把属性设置好要
页: [1]
查看完整版本: Web设计器如何设置默认字体