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

登录

在设计器使用的时候，有时候有这种需求，就是想报表进行新建的时候。能够直接默认好字体。比如默认字体是微软雅黑或者是宋体
那么这应该如何实现了
1、首先设置可选择的字体类型，设置 fontsConfig.json 字体配置文件
设置可选择的字体为微软雅黑和宋体

复制代码

2、代码层设置设计器的选择字体配置 designer.fontSet = "registered"

复制代码

3、设置默认模块，如果你的报表想默认都是微软雅黑，那么模版文件中所有组件的字体都默认设置为微软雅黑。模版设置代码

复制代码

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[type="button"][title="About"] {
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见附件

		自动登录	找回密码
密码			立即注册

0 个回复