在设计器使用的时候,有时候有这种需求,就是想报表进行新建的时候。能够直接默认好字体。比如默认字体是 微软雅黑或者是宋体
那么这应该如何实现了
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[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见附件
|