请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

KearneyKang 讲师达人认证 悬赏达人认证
超级版主   /  发表于:2024-7-5 14:29  /   查看:55  /  回复:0
在设计器使用的时候,有时候有这种需求,就是想报表进行新建的时候。能够直接默认好字体。比如默认字体是 微软雅黑或者是宋体
那么这应该如何实现了
1、首先设置可选择的字体类型,设置 fontsConfig.json 字体配置文件
设置可选择的字体为微软雅黑和宋体
  1. {
  2.         "path": "",
  3.         "descriptors": [
  4.                 {
  5.                         "name": "微软雅黑",
  6.                         "locals": [
  7.                                 "微软雅黑",
  8.                                 "MicrosoftYaHei"
  9.                         ],
  10.                         "source": "fonts/SimHei.ttf"  
  11.                 },               
  12.                 {
  13.                         "name": "宋体",
  14.                         "source": "fonts/simsun.ttc"
  15.                 }               
  16.         ]
  17. }
复制代码
2、代码层设置设计器的选择字体配置 designer.fontSet = "registered"
  1. ARJS.FontStore.registerFonts("./fonts/fontsConfig.json").then(res => {
  2.     console.log(designer)
  3.     designer.fontSet = "registered"
  4.   })
复制代码
3、设置默认模块,如果你的报表想默认都是微软雅黑,那么模版文件中所有组件的字体都默认设置为微软雅黑。模版设置代码
  1. var defaultTemplates = {
  2.     metricTemplates: [{ id: "reports/metric-template.rdlx-json" }],
  3.     imperialTemplates: [{ id: "reports/imperial-template.rdlx-json" }],
  4.   };
复制代码
4、整个实现代码
  1. <html lang="en">

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

  17.     button[type="button"][title="About"] {
  18.       display: none;
  19.     }
  20.   </style>

  21. </head>

  22. <body>

  23.   <div id="designer-host"></div>
  24. </body>

  25. <script>

  26.   const ARJS = GC.ActiveReports.Core;


  27.   var defaultTemplates = {
  28.     metricTemplates: [{ id: "reports/metric-template.rdlx-json" }],
  29.     imperialTemplates: [{ id: "reports/imperial-template.rdlx-json" }],
  30.   };
  31.   var designerConfig = {
  32.     language: "zh",
  33.     customInitTemplates: defaultTemplates,
  34.     disableOpenSaveHotkeys: false,
  35.     lockLayout: false,
  36.     storeUserPreferences: false,
  37.     disableSystemClipboard: false,
  38.   };
  39.   let designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host",designerConfig);
  40.   ARJS.FontStore.registerFonts("./fonts/fontsConfig.json").then(res => {
  41.     console.log(designer)
  42.     designer.fontSet = "registered"
  43.   })
  44.   designer.setActionHandlers({
  45.     onRender: function (info) {
  46.       console.log(info)
  47.     }
  48.   })

  49. </script>

  50. </html>
复制代码
具体详细代码的demo见附件

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部