web端创建设计器相关属性控制(AR16(其他版本仅供参考))

随着现在前段的越发强大，很多人都开始选择AR的前段集成方法，也就是B/S的架构。项目发布后，客户只需要浏览器访问就可以查看和编辑报表。

而针对这种情况，我们的需求也各不相同，那如何控制这些属性以及怎么实际操作呢。我们针对设计器的初始化有很多可以控制的方法

今天就给大家大概整和一下目前设计器可以控制的属性样式。
具体api可以参考:https://www.grapecity.com/active ... er-plugins-api.html

一下代码可以直接应用在自己的html代码上:

1. //具体可参考:https://www.grapecity.com/activereportsnet/docs/latest/online/web-designer-api.html
   
2. var viewer = null;
   
3. GrapeCity.ActiveReports.Designer.create('#designer-id1', {      //控制生成标签
   
4.   // document: {             //打开已经设计的报表（默认在resource目录下的报表）
   
5.   //   id: "new.rdlx",      //指定报表名称
   
6.   //   type: {
   
7.   //     platform: "rdlx",  //区域报表这里要改成rpx
   
8.   //     type: "report"
   
9.   //   }
   
10.   // },
    
11.   preview: {                    //预览报表
    
12.     openViewer: (options) => {
    
13.       if (viewer) {
    
14.         viewer.openReport(options.documentInfo.id);
    
15.         return;
    
16.       }
    
17.       viewer = GrapeCity.ActiveReports.JSViewer.create({
    
18.         element: '#' + options.element,
    
19.         renderFormat: 'html',
    
20.         reportService: {
    
21.           url: 'api/reporting',
    
22.         },
    
23.         reportID: options.documentInfo.id,
    
24.         documentLoaded: () => {
    
25.           this.viewer._viewer.zoom = 2;
    
26.         },
    
27.         settings: {
    
28.           zoomType: 'FitPage',
    
29.         },
    
30.       });
    
31.     }
    
32.   },
    
33.   language: 'zh',   //默认创建的语言:'en', 'ja', 'zh', 'zh-TW', 'es', 'ko', and 'pl'
    
34.   fonts: [{ header: 'Questionable Choice' }, { label: "我是Arial", value: "Arial" }{label: "微软雅黑", value: "微软雅黑"}, 'Arial Black', 'Comic Sans MS', 'Courier New', 'Geneva', 'Georgia', 'Helvetica', 'Impact', 'Lucida Console', 'Meiryo', 'Meiryo UI', 'MingLiU', 'MingLiU-ExtB', 'MS Gothic', 'MS Mincho', 'MS PGothic', 'MS PMincho', 'MS Song', 'MS UI Gothic', 'NSimSun', 'Osaka', 'PMingLiU', 'PMingLiU-ExtB', 'SimSun', 'SimSun-ExtB', 'Song', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana', 'Yu Gothic'],//创建支持所有字体   可自定义名称  不控制默认全部
    
35.   imageMimeTypes: ['image/bmp', 'image/jpeg', 'image/gif', 'image/png', 'image/svg+xml', 'image/x-emf', 'image/x-wmf'],   //可支持的图片组件格式  不控制默认全部
    
36.   units: 'cm',    //页面单位   in/cm
    
37.   lockLayout: false,      //锁定布局   用户只有修改属性的权利，没有任何编辑布局的能力
    
38.   storeUnsavedReport: false,         //是否可以恢复上次未编辑完的报表   默认为true
    
39.   appBar: {  //顶部控制栏
    
40.     visible: true,
    
41.     saveButton: {
    
42.       visible: true
    
43.     },
    
44.     saveAsButton: {
    
45.       visible: true
    
46.     },
    
47.     insertTab: {
    
48.       visible: true
    
49.     }
    
50.   },
    
51.   menu: {  //左侧菜单栏
    
52.     visible: true,
    
53.     toolBox: {
    
54.       visible: true
    
55.     },
    
56.     documentExplorer: {
    
57.       visible: true
    
58.     }
    
59.   },
    
60.   statusBar: {    //底部工具栏
    
61.     toggleUnitsButton: {
    
62.       visible: true
    
63.     },
    
64.     toggleGridButton: {
    
65.       visible: true
    
66.     },
    
67.     gridSizeEditor: {
    
68.       visible: true
    
69.     },
    
70.     rulersButton: {
    
71.       visible: true
    
72.     },
    
73.     propertiesModeButton: {
    
74.       visible: true
    
75.     }
    
76.   },
    
77.   documents: {            //整体文件及相关回方法
    
78.     fileView: {
    
79.       visible: true
    
80.     },
    
81.     handlers: {
    
82.       onBeforeSave (info) {
    
83.         console.log('onBeforeSave')
    
84.       },
    
85.       onAfterSave (info) {
    
86.         console.log('onAfterSave')
    
87.       },
    
88.       onBeforeOpen (info) {
    
89.         console.log('onBeforeOpen')
    
90.       },
    
91.       onAfterOpen (info) {
    
92.         console.log('onAfterOpen')
    
93.       },
    
94.       onBeforeCreate (info) {
    
95.         console.log('onBeforeCreate')
    
96.       },
    
97.       onAfterCreate (info) {
    
98.         console.log('onAfterCreate')
    
99.       },
    
100.     }
     
101.   }
     
102. }).then((api) => {
     
103.   //使用指定的创建要在 Web Designer 组件中编辑的新报告
     
104.   api.documents.create({
     
105.     //template: { id: "传入报表名称即可(比如:OrganizationBrandedReport.rdlx)" },        //指定模板打开(模板默认路径:\templates\)
     
106.     //自定义初始化创建名称
     
107.     // name: "aaa",  //自定义创建报表名称     //这里不能和documents同时定义，会产生冲突
     
108.     // type: {
     
109.     //   platform: "rdlx",  //创建RDL报表
     
110.     //   type: "report",
     
111.     //   subType: "cpl"
     
112.     // }
     
113.     // type: {
     
114.     //   platform: "rpx",  //创建区域报表
     
115.     //   type: "report"
     
116.     // }
     
117.     // type: {
     
118.     //   platform: "rdlx", //创建页面报表
     
119.     //   type: "report",
     
120.     //   subType: "fpl"
     
121.     // }
     
122.   })
     
123. 
     
124.   api.settings.data = {         //设置数据区域的可见性和一些参数
     
125.     dataSets: {
     
126.       visible: true,
     
127.       canModify: true
     
128.     },
     
129.     dataSources: {
     
130.       visible: true,
     
131.       canModify: true,
     
132.       options: {
     
133.         predefinedProviders: [
     
134.           "SQL",
     
135.           "OLEDB",
     
136.           "ODBC",
     
137.           "JSON",
     
138.           "CSV",
     
139.           "XML"
     
140.         ],
     
141.         oleDbProviders: [
     
142.           "Microsoft.Jet.OLEDB.4.0",
     
143.           "SQLOLEDB.1",
     
144.           "MSDataShape.1",
     
145.           "MSDASQL.1"
     
146.         ],
     
147.         customProviders: []
     
148.       }
     
149.     },
     
150.     dataTab: {
     
151.       visible: true
     
152.     },
     
153.     parameters: {
     
154.       visible: true,
     
155.       canModify: true
     
156.     },
     
157.     commonValues: {
     
158.       visible: true
     
159.     }
     
160.   }
     
161. })

复制代码

参考示例: