转帖|使用教程|编辑:鲍佳佳|2020-08-10 13:42:03.363|阅读 361 次
概述:ActiveReports 是一款专注于 .NET 和 .NET Core 平台的报表控件。通过拖拽式报表设计器,可以快速地设计 Excel表格、Word文档、图表、数据过滤、数据钻取、精准套打等类型报表。本文主要是对初始化Viewer的选项设置进行系列说明。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
ActiveReports 是一款专注于 .NET 和 .NET Core 平台的报表控件。通过拖拽式报表设计器,可以快速地设计 Excel表格、Word文档、图表、数据过滤、数据钻取、精准套打等类型报表,全面满足 WinForm、ASP.NET、ASP.NET MVC、WPF 平台中各种报表的开发需要。同时,通过丰富的 API 可以灵活的实现报表创建、加载和运行时的个性化自定义需求。
初始化Viewer 的选项设置
以下方式是在初始化Viewer 中会被执行的
说明: JSViewer 实现报表导航,如钻取,跳转URL,跳转书签,折叠展开控件时所执行的回调函数。
类型: function(actionType, actionParams)回调函数
示例::
action: (actionType, actionParams) => console.log('Action type: ' + actionType + '; Action parameters: ' + actionParams)
说明: 是用于设置所提供的导出文件的格式,在不设置该选项时候,JSViewer 默认是支持所有格式导出,PDF, Excel, Word, JSON, XML, CSV, 图像
类型: Array(数组)
示例:
availableExports: ['Xml', 'Pdf']
说明: 设置Viewer 是单页显示还是连续一页加载
类型: String(字符串)
可识别的值: 'single', 'continuous'
示例:
displayMode: 'Continuous'
说明: 当报表文档从服务器中完全加载完成后执行的回调函数。
类型: function() 回调函数
示例:
documentLoaded: () => console.log('The document is loaded entirely on the server')
返回值: Void 空
说明 JQuery 选择器,用于绑定JSViewer 的宿主对象。
类型: String
示例::
element: '#viewerContainer'
说明 : 当加载报表发生错误时候,所执行的的错误提示回调函数。如果回调函数返回的是True默认的错误提示面板就不会出现了。错误参数是一个包含message属性的对象,开发人员可自定义错误提示信息。
类型: function(error) 回调函数
示例: 隐藏默认的错误面板
error: (error) => { if (error.message) { // show error message. alert("Internal error! Please ask administrator."); // do not show default error message. } }
说明: 指定JS Viewer 加载报表的标识(或路径)
类型: String
示例:
reportID: 'AnnualReport.rdlx'
说明: JSViewer 获取关于请求报表时所执行的回调函数,该回调函数会包含 reportInfo 对象,包含报表名称目录信息,参数信息,以及渲染报表结果的链接。
类型: function(reportInfo)
Example:
reportLoaded: (reportInfo) => console.log('The report ' + reportInfo.name+ ' was successfully loaded!')
说明: {name, value} 键值对的数组,用于为报表传递对应的参数值。
类型: Array(数组)
示例:
reportParameters: [{ name: 'ReportParameter1', values: ['1']}]
说明: 连接 WebAPI 的设置
类型:.包含URL 及可选的securityToken 属性的对象
示例:
reportService: { url: '//example.com/api/reporting', securityToken: '42A9CD80A4F3445A9BB60A221D042FCC', };
可调用的API 方法及属性
说明: 常用于报表钻取,报表钻取到子报表时,使用该方法可以让Viewer 返回到主报表。
类型: backToParent()Void
示例:
viewer.backToParent()
返回值: Void
create
说明: 新建一个新的Viewer 实例,并在指定的 DOM 元素中加载它。
Syntax: create()Void
Parameters:
Example:
const viewer = GrapeCity.ActiveReports.JSViewer.create({ element: '#root', reportID: 'AnnualReport.rdlx', availableExports: ['Xml', 'Pdf'], // other properties });
Return Value: Void
说明: 从当前元素中删除Viewer
Syntax: destroy()Void
Example:
viewer.destroy()
Return Value: Void
说明: 导出当前报表
Syntax: export(exportType,callback,saveAsDialog,settings)Void
Parameters:
示例:
viewer.export('Pdf', downloadReport, true, { Title: '1997 Annual Report' })
Return Value: Void
说明: 获取报表目录 TOC.
Syntax: viewer.getToc()
Example:
console.log(viewer.getToc())
Return Value: any
说明: 指定Viewer 展示特定页的报表
Syntax: goToPage(number, offset, callback)Void
Parameters:
Example:
viewer.goToPage(1)
Return Value: Void
说明: 加载指定的报表文件报表
Syntax: openReport(reportID: string, reportParameters?: Array
Parameters:
Example:
viewer.openReport('Invoice.rdlx')
Return Value: Void
说明: 打印当前展示的报表.
Syntax: print()Void
Example:
viewer.print()
Return Value: Void
说明: 刷新报表预览页面
Syntax: option(name,[value])Object
Example:
viewer.refresh()
Return Value: Void
说明: 获取当前JSViewer 的版本。
Syntax: viewer.version
Example:
console.log(viewer.version)
Return Value: string
说明: 获取或设置JS Viewer 的渲染模式
Type: String
Accepted Value: 'Galley', 'Paginated'
Example:
viewer.renderMode = 'Galley';
说明: 为工具栏添加自定义按钮
Type: item: ToolbarItem
Example:
ToolbarItem = { key: string; iconCssClass?: string; icon?: Icon; text?: string; title?: string; checked?: boolean; enabled?: boolean; action?: (toolbarItem) => function; onUpdate?: (args: ChangedEventArgs, toolbarItem) => function; } Icon = FontIcon | SVGIcon; SVGIcon = { type: 'svg'; content: any; //(string | JSX.element) size?: Size; rotate?: '90' | '180' | '270'; }; FontIcon = { type: 'font'; iconCssClass: string; fontSize?: string; } var pdfExportButton = { key: '$pdfExportButtonKey', iconCssClass: 'mdi mdi-file-pdf', enabled: true, action: function(item) { console.log('Export to PDF function works here'); }, onUpdate: function(arg, item) { console.log('Something in viewer was updated, check/update button state here'); } }; //OR button with svg as icon var icon = ` `; var svgPdfExportButton = { key: '$pdfExportButtonKey', icon: {type: 'svg', content: icon}, enabled: true, action: function(item) { console.log('Export to PDF function works here'); }, onUpdate: function(arg, item) { console.log('Something in viewer was updated, check/update button state here'); } } viewer.toolbar.addItem(pdfExportButton); //or viewer.toolbar.addItem(svgPdfExportButton);
说明: 更新设置某一工具栏按钮的布局,功能或状态
Type: String: key, ToolbarItem item
Example:
var xlsxExportButton = { key: '$xlsxExportButtonKey', iconCssClass: 'mdi mdi-file-pdf', enabled: true, action: function(item) { console.log('Export to XLSX function works here'); }, onUpdate: function(arg, item) { console.log('Something in viewer was updated, check/update button state here'); } }; viewer.toolbar.updateItem('$pdfExportButtonKey', xlsxExportButton); //from now button will behave as described in new properties
说明: 删除工具栏的自定义的按钮。如果要删除默认的工具栏按钮, 需要调用 updateLayout 函数
Type: String: key
Example:
viewer.toolbar.removeItem('$pdfExportButtonKey');
说明: 设置侧边栏可见或隐藏。如果不传递值,默认是隐藏。
Type: boolean
Example:
viewer.sidebar.toggle(true);;//will hide it viewer.toggleSidebar(false);//will show it
说明: 获取当前加载页码
Syntax: viewer.currentPage
Example:
console.log(viewer.currentPage()) Return Value: An integer representing currently displayed page number.
说明: 获取当前报表的总页数
Syntax: viewer.pageCount
Example:
console.log(viewer.pageCount())
Return Value: An integer representing page count.
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自: