报表控件Activereports使用教程:你必须要了解的Viewer API

ActiveReports 是一款专注于 .NET 和 .NET Core 平台的报表控件。通过拖拽式报表设计器,可以快速地设计 Excel表格、Word文档、图表、数据过滤、数据钻取、精准套打等类型报表,全面满足 WinForm、ASP.NET、ASP.NET MVC、WPF 平台中各种报表的开发需要。同时,通过丰富的 API 可以灵活的实现报表创建、加载和运行时的个性化自定义需求。

点击下载ActiveReports最新试用版

初始化Viewer 的选项设置

以下方式是在初始化Viewer 中会被执行的

action

说明: JSViewer 实现报表导航,如钻取,跳转URL,跳转书签,折叠展开控件时所执行的回调函数。

类型: function(actionType, actionParams)回调函数

示例::

action: (actionType, actionParams) => console.log('Action type: ' + actionType + '; Action parameters: ' + actionParams)
availableExports

说明: 是用于设置所提供的导出文件的格式,在不设置该选项时候,JSViewer 默认是支持所有格式导出,PDF, Excel, Word, JSON, XML, CSV, 图像

类型: Array(数组)

示例:

availableExports: ['Xml', 'Pdf']
displayMode

说明: 设置Viewer 是单页显示还是连续一页加载

类型: String(字符串)

可识别的值: ‘single’, ‘continuous’

示例:

displayMode: 'Continuous'
documentLoaded

说明: 当报表文档从服务器中完全加载完成后执行的回调函数。

类型: function() 回调函数

示例:

documentLoaded: () => console.log('The document is loaded entirely on the server')

返回值: Void 空

element

说明 JQuery 选择器,用于绑定JSViewer 的宿主对象。

类型: String

示例::

element: '#viewerContainer'

error

说明 : 当加载报表发生错误时候,所执行的的错误提示回调函数。如果回调函数返回的是True默认的错误提示面板就不会出现了。错误参数是一个包含message属性的对象,开发人员可自定义错误提示信息。

类型: function(error) 回调函数

示例: 隐藏默认的错误面板

error: (error) => {

    if (error.message) {

        // show error message.

        alert("Internal error! Please ask administrator.");

        // do not show default error message.

    }

}

reportID

说明: 指定JS Viewer 加载报表的标识(或路径)

类型: String

示例:

reportID: 'AnnualReport.rdlx'

reportLoaded

说明: JSViewer 获取关于请求报表时所执行的回调函数,该回调函数会包含 reportInfo 对象,包含报表名称目录信息,参数信息,以及渲染报表结果的链接。

类型: function(reportInfo)

Example:

reportLoaded: (reportInfo) => console.log('The report ' + reportInfo.name+ ' was successfully loaded!')
reportParameters

说明: {name, value} 键值对的数组,用于为报表传递对应的参数值。

类型: Array(数组)

示例:

reportParameters: [{ name: 'ReportParameter1', values: ['1']}]

reportService

说明: 连接 WebAPI 的设置

类型:.包含URL 及可选的securityToken 属性的对象

示例:

reportService: {

    url: 'http://example.com/api/reporting', securityToken: '42A9CD80A4F3445A9BB60A221D042FCC',

};

可调用的API 方法及属性

方法:
backtoParent

说明: 常用于报表钻取,报表钻取到子报表时,使用该方法可以让Viewer 返回到主报表。

类型: backToParent()Void

示例:

viewer.backToParent()
返回值: Void

create

说明: 新建一个新的Viewer 实例,并在指定的 DOM 元素中加载它。

Syntax: create()Void

Parameters:

params
Example:

const viewer = GrapeCity.ActiveReports.JSViewer.create({

    element: '#root',

    reportID: 'AnnualReport.rdlx',

    availableExports: ['Xml', 'Pdf'],

    // other properties

});      
Return Value: Void

destroy

说明: 从当前元素中删除Viewer

Syntax: destroy()Void

Example:

viewer.destroy()
Return Value: Void

export

说明: 导出当前报表

Syntax: export(exportType,callback,saveAsDialog,settings)Void

Parameters:

exportType: 指定导出格式.
settings: RenderingExtensions所提供的导出设置
注意: 区域报表的导出设置在使用rendering extensions时候不可用,。页面报表和RDL 报表使用Export Filter 导出PDF时不可用。
示例:

viewer.export('Pdf', downloadReport, true, { Title: '1997 Annual Report' })
Return Value: Void

getTOC

说明: 获取报表目录 TOC.

Syntax: viewer.getToc()

Example:

console.log(viewer.getToc())
Return Value: any

goToPage

说明: 指定Viewer 展示特定页的报表

Syntax: goToPage(number, offset, callback)Void

Parameters:

number: The number of pages to go to.
Example:

viewer.goToPage(1)
Return Value: Void

openReport

说明: 加载指定的报表文件报表

Syntax: openReport(reportID: string, reportParameters?: Array): void

Parameters:

reportID: The id of the report.
Example:

viewer.openReport(‘Invoice.rdlx’)
Return Value: Void

Print

说明: 打印当前展示的报表.

Syntax: print()Void

Example:

viewer.print()
Return Value: Void

Refresh

说明: 刷新报表预览页面

Syntax: option(name,[value])Object

Example:

viewer.refresh()
Return Value: Void

Version

说明: 获取当前JSViewer 的版本。

Syntax: viewer.version

Example:

console.log(viewer.version)
Return Value: string

renderMode

说明: 获取或设置JS Viewer 的渲染模式

Type: String

Accepted Value: ‘Galley’, ‘Paginated’

Example:

viewer.renderMode = 'Galley';
toolbar.addItem

说明: 为工具栏添加自定义按钮

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);

toolbar.updateItem

说明: 更新设置某一工具栏按钮的布局,功能或状态

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

toolbar.removeItem

说明: 删除工具栏的自定义的按钮。如果要删除默认的工具栏按钮, 需要调用 updateLayout 函数

Type: String: key

Example:

viewer.toolbar.removeItem('$pdfExportButtonKey');

toggleSidebar

说明: 设置侧边栏可见或隐藏。如果不传递值,默认是隐藏。

Type: boolean

Example:

viewer.sidebar.toggle(true);;//will hide it viewer.toggleSidebar(false);//will show it

可用属性
currentPage

说明: 获取当前加载页码

Syntax: viewer.currentPage

Example:

console.log(viewer.currentPage())


Return Value: An integer representing currently displayed page number.

pageCount

说明: 获取当前报表的总页数

Syntax: viewer.pageCount

Example:

console.log(viewer.pageCount())
Return Value: An integer representing page count.

如果你对我们的产品感兴趣或者有任何疑问,欢迎咨询慧都在线客服>>

慧都高端UI界面开发

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页