web端创建设计器相关属性控制(AR16(其他版本仅供参考))
本帖最后由 Felix.Li 于 2023-8-28 18:01 编辑随着现在前段的越发强大，很多人都开始选择AR的前段集成方法，也就是B/S的架构。项目发布后，客户只需要浏览器访问就可以查看和编辑报表。
而针对这种情况，我们的需求也各不相同，那如何控制这些属性以及怎么实际操作呢。我们针对设计器的初始化有很多可以控制的方法
今天就给大家大概整和一下目前设计器可以控制的属性样式。
具体api可以参考:https://www.grapecity.com/active ... er-plugins-api.html
一下代码可以直接应用在自己的html代码上:
//具体可参考:https://www.grapecity.com/activereportsnet/docs/latest/online/web-designer-api.html
var viewer = null;
GrapeCity.ActiveReports.Designer.create('#designer-id1', { //控制生成标签
// document: { //打开已经设计的报表（默认在resource目录下的报表）
// id: "new.rdlx", //指定报表名称
// type: {
// platform: "rdlx",//区域报表这里要改成rpx
// type: "report"
// }
// },
preview: { //预览报表
openViewer: (options) => {
if (viewer) {
viewer.openReport(options.documentInfo.id);
return;
}
viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#' + options.element,
renderFormat: 'html',
reportService: {
url: 'api/reporting',
},
reportID: options.documentInfo.id,
documentLoaded: () => {
this.viewer._viewer.zoom = 2;
},
settings: {
zoomType: 'FitPage',
},
});
}
},
language: 'zh', //默认创建的语言:'en', 'ja', 'zh', 'zh-TW', 'es', 'ko', and 'pl'
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'],//创建支持所有字体 可自定义名称不控制默认全部
imageMimeTypes: ['image/bmp', 'image/jpeg', 'image/gif', 'image/png', 'image/svg+xml', 'image/x-emf', 'image/x-wmf'], //可支持的图片组件格式不控制默认全部
units: 'cm', //页面单位 in/cm
lockLayout: false, //锁定布局 用户只有修改属性的权利，没有任何编辑布局的能力
storeUnsavedReport: false, //是否可以恢复上次未编辑完的报表 默认为true
appBar: {//顶部控制栏
visible: true,
saveButton: {
visible: true
},
saveAsButton: {
visible: true
},
insertTab: {
visible: true
}
},
menu: {//左侧菜单栏
visible: true,
toolBox: {
visible: true
},
documentExplorer: {
visible: true
}
},
statusBar: { //底部工具栏
toggleUnitsButton: {
visible: true
},
toggleGridButton: {
visible: true
},
gridSizeEditor: {
visible: true
},
rulersButton: {
visible: true
},
propertiesModeButton: {
visible: true
}
},
documents: { //整体文件及相关回方法
fileView: {
visible: true
},
handlers: {
onBeforeSave (info) {
console.log('onBeforeSave')
},
onAfterSave (info) {
console.log('onAfterSave')
},
onBeforeOpen (info) {
console.log('onBeforeOpen')
},
onAfterOpen (info) {
console.log('onAfterOpen')
},
onBeforeCreate (info) {
console.log('onBeforeCreate')
},
onAfterCreate (info) {
console.log('onAfterCreate')
},
}
}
}).then((api) => {
//使用指定的创建要在 Web Designer 组件中编辑的新报告
api.documents.create({
//template: { id: "传入报表名称即可(比如:OrganizationBrandedReport.rdlx)" }, //指定模板打开(模板默认路径:\templates\)
//自定义初始化创建名称
// name: "aaa",//自定义创建报表名称 //这里不能和documents同时定义，会产生冲突
// type: {
// platform: "rdlx",//创建RDL报表
// type: "report",
// subType: "cpl"
// }
// type: {
// platform: "rpx",//创建区域报表
// type: "report"
// }
// type: {
// platform: "rdlx", //创建页面报表
// type: "report",
// subType: "fpl"
// }
})
api.settings.data = { //设置数据区域的可见性和一些参数
dataSets: {
visible: true,
canModify: true
},
dataSources: {
visible: true,
canModify: true,
options: {
predefinedProviders: [
"SQL",
"OLEDB",
"ODBC",
"JSON",
"CSV",
"XML"
],
oleDbProviders: [
"Microsoft.Jet.OLEDB.4.0",
"SQLOLEDB.1",
"MSDataShape.1",
"MSDASQL.1"
],
customProviders: []
}
},
dataTab: {
visible: true
},
parameters: {
visible: true,
canModify: true
},
commonValues: {
visible: true
}
}
})参考示例:
页:
[1]